From a74635a37f5445c06d7f05f8604f2495848a0419 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Thu, 15 Sep 2022 23:04:43 +0100
Subject: [PATCH] fix: Improved breakpoints for pins on mobile fix: Prevent
 clock icon shrinking fix: Prevent metadata wrapping

---
 app/components/DocumentCard.tsx    | 9 ++++++++-
 app/components/PinnedDocuments.tsx | 8 ++++++--
 shared/styles/breakpoints.ts       | 1 +
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/components/DocumentCard.tsx b/app/components/DocumentCard.tsx
index db51a0857..15b6cd07a 100644
--- a/app/components/DocumentCard.tsx
+++ b/app/components/DocumentCard.tsx
@@ -125,7 +125,7 @@ function DocumentCard(props: Props) {
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
-                <ClockIcon color="currentColor" size={18} />{" "}
+                <Clock color="currentColor" size={18} />
                 <Time
                   dateTime={document.updatedAt}
                   tooltipDelay={500}
@@ -152,6 +152,10 @@ function DocumentCard(props: Props) {
   );
 }
 
+const Clock = styled(ClockIcon)`
+  flex-shrink: 0;
+`;
+
 const AnimatePresence = styled(m.div)`
   width: 100%;
   height: 100%;
@@ -215,6 +219,9 @@ const DocumentMeta = styled(Text)`
   gap: 2px;
   color: ${(props) => props.theme.textTertiary};
   margin: 0 0 0 -2px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 const DocumentLink = styled(Link)<{
diff --git a/app/components/PinnedDocuments.tsx b/app/components/PinnedDocuments.tsx
index 9fbeba93b..31cbda5aa 100644
--- a/app/components/PinnedDocuments.tsx
+++ b/app/components/PinnedDocuments.tsx
@@ -126,8 +126,8 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
 const List = styled.div`
   display: grid;
   column-gap: 8px;
-  row-gap: 8px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  row-gap: 12px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   padding: 0;
   list-style: none;
   margin: 16px 0 32px;
@@ -136,6 +136,10 @@ const List = styled.div`
     display: none;
   }
 
+  ${breakpoint("mobileLarge")`
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  `};
+
   ${breakpoint("tablet")`
     grid-template-columns: repeat(4, minmax(0, 1fr));
   `};
diff --git a/shared/styles/breakpoints.ts b/shared/styles/breakpoints.ts
index 5c9e18d23..df78193a8 100644
--- a/shared/styles/breakpoints.ts
+++ b/shared/styles/breakpoints.ts
@@ -1,5 +1,6 @@
 const breakpoints = {
   mobile: 0,
+  mobileLarge: 460,
   // targeting all devices
   tablet: 737,
   // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)