fix: Improved breakpoints for pins on mobile

fix: Prevent clock icon shrinking
fix: Prevent metadata wrapping

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)<{

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));
   `};

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)