From b319a5a5c903cc2e10057d7e5d8defaa33dfae44 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 29 Feb 2024 15:27:47 +0800
Subject: [PATCH] Some layout tweaks

---
 .../patterns/LibraryCards/LibraryGridCard.tsx |  4 ++-
 .../homeFeed/MultiSelectControls.tsx          | 17 +++++++++++++
 .../templates/homeFeed/TLDRLayout.tsx         | 25 +++++++++++++++++--
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
index e2dc59569..c824c82e9 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
@@ -74,9 +74,11 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
         overflow: 'hidden',
         cursor: 'pointer',
         '@media (max-width: 930px)': {
-          // m: '15px',
           width: 'calc(100% - 30px)',
         },
+        '@mdDown': {
+          width: '100%',
+        },
       }}
       alignment="start"
       distribution="start"
diff --git a/packages/web/components/templates/homeFeed/MultiSelectControls.tsx b/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
index 4361bef88..1d95feaea 100644
--- a/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
+++ b/packages/web/components/templates/homeFeed/MultiSelectControls.tsx
@@ -85,13 +85,30 @@ export const MultiSelectControls = (props: LibraryHeaderProps): JSX.Element => {
         >
           <SpanBox
             css={{
+              display: 'flex',
               fontSize: '14px',
               fontFamily: '$display',
               marginRight: 'auto',
+              '@mdDown': {
+                display: 'none',
+              },
             }}
           >
             {props.numItemsSelected} items selected
           </SpanBox>
+          <SpanBox
+            css={{
+              display: 'none',
+              fontSize: '14px',
+              fontFamily: '$display',
+              marginRight: 'auto',
+              '@mdDown': {
+                display: 'flex',
+              },
+            }}
+          >
+            {props.numItemsSelected} items
+          </SpanBox>
           <ArchiveButton {...props} />
           <AddLabelsButton setShowLabelsModal={setShowLabelsModal} />
           <RemoveItemsButton setShowConfirmDelete={setShowConfirmDelete} />
diff --git a/packages/web/components/templates/homeFeed/TLDRLayout.tsx b/packages/web/components/templates/homeFeed/TLDRLayout.tsx
index 53eafdc00..29a3a26cc 100644
--- a/packages/web/components/templates/homeFeed/TLDRLayout.tsx
+++ b/packages/web/components/templates/homeFeed/TLDRLayout.tsx
@@ -58,11 +58,14 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
         {props.isValidating && props.items.length == 0 && <TopBarProgress />}
 
         {props.items.map((item) => {
-          const source = siteName(
+          const sourceName = siteName(
             item.node.originalArticleUrl,
             item.node.url,
             item.node.siteName
           )
+          const source =
+            sourceName == item.node.author ? undefined : item.node.author
+
           return (
             <VStack key={`tldr-${item.node.id}`} css={{ gap: '10px' }}>
               <HStack
@@ -96,6 +99,12 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       display: 'flex',
                       fontFamily: '$inter',
                       fontSize: '16px',
+                      maxWidth: '150px',
+                      maxLines: '1',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     {item.node.siteName}
@@ -104,9 +113,14 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                 {source && item.node.author && (
                   <SpanBox
                     css={{
+                      maxLines: '1',
                       display: 'flex',
                       fontFamily: '$inter',
-                      fontSize: '16px',
+                      maxWidth: '150px',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     •
@@ -118,6 +132,12 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       display: 'flex',
                       fontFamily: '$inter',
                       fontSize: '16px',
+                      maxWidth: '120px',
+                      maxLines: '1',
+                      textOverflow: 'ellipsis',
+                      '@mdDown': {
+                        fontSize: '12px',
+                      },
                     }}
                   >
                     {item.node.author}
@@ -145,6 +165,7 @@ export function TLDRLayout(props: TLDRLayoutProps): JSX.Element {
                       fontFamily: '$inter',
                       fontWeight: '700',
                       fontSize: '20px',
+                      wordBreak: 'break-all',
                       textDecoration: 'underline',
                       a: {
                         color: '$thTLDRText',