From dbd85d717f86d91d1282d752381556bd77f2213d Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 3 Aug 2023 18:00:46 +0800
Subject: [PATCH] Improve spacing for new list view and header

---
 packages/web/components/elements/Button.tsx   |  1 +
 .../LibraryCards/LibraryCardStyles.tsx        |  5 ++-
 .../patterns/LibraryCards/LibraryListCard.tsx | 33 +++++++++----------
 .../templates/homeFeed/LibraryHeader.tsx      |  2 +-
 4 files changed, 21 insertions(+), 20 deletions(-)

diff --git a/packages/web/components/elements/Button.tsx b/packages/web/components/elements/Button.tsx
index 4d36a2b2d..f220190ff 100644
--- a/packages/web/components/elements/Button.tsx
+++ b/packages/web/components/elements/Button.tsx
@@ -244,6 +244,7 @@ export const Button = styled('button', {
         '&:hover': {
           opacity: 0.7,
         },
+        '&:focus': { outline: 'none' },
       },
       articleActionIcon: {
         bg: 'transparent',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
index 3afa78ae5..ff4afeb63 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryCardStyles.tsx
@@ -28,6 +28,10 @@ export const MetaStyle = {
   fontSize: '12px',
   fontWeight: '400',
   fontFamily: '$display',
+  maxLines: 1,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-word',
 }
 
 export const TitleStyle = {
@@ -67,7 +71,6 @@ export const AuthorInfoStyle = {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   maxWidth: '240px',
-  overflow: 'hidden',
   color: '$thTextSubtle3',
   fontSize: '12px',
   fontWeight: '400',
diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index f10b68741..839a2cb5b 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -270,31 +270,28 @@ export function LibraryListCardContent(
         distribution="start"
         css={{ height: '100%', width: '100%', lineHeight: 1, gap: '5px' }}
       >
-        <VStack
-          alignment="start"
-          distribution="center"
+        <HStack
           css={{
-            height: '55px',
-            width: '100%',
-            justifyContent: 'space-between',
+            ...MetaStyle,
+            lineHeight: 1.1,
+            color: '$grayText',
+            overflowX: 'hidden',
+            overflowY: 'visible',
           }}
+          distribution="start"
         >
-          <HStack
-            css={{
-              ...MetaStyle,
-              color: '$grayText',
-            }}
-            distribution="start"
-          >
-            <LibraryItemMetadata item={props.item} showProgress={true} />
-          </HStack>
+          <LibraryItemMetadata item={props.item} showProgress={true} />
+        </HStack>
 
-          <Box css={{ ...TitleStyle, width: '80%' }}>{props.item.title}</Box>
+        <Box css={{ ...TitleStyle, width: '80%' }}>{props.item.title}</Box>
+        {(props.item.author?.length ?? 0 + originText.length) > 0 && (
           <SpanBox
             css={{
               ...AuthorInfoStyle,
               maxWidth: '90%',
-              minHeight: '12px',
+
+              overflowX: 'hidden',
+              overflowY: 'visible',
             }}
           >
             {props.item.author}
@@ -303,7 +300,7 @@ export function LibraryListCardContent(
               {originText}
             </SpanBox>
           </SpanBox>
-        </VStack>
+        )}
 
         <HStack
           distribution="start"
diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index 98f529410..58f686ced 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -582,7 +582,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
             display: props.multiSelectMode !== 'off' ? 'flex' : 'none',
           },
           '@media (min-width: 930px)': {
-            width: '660px',
+            width: props.layout == 'GRID_LAYOUT' ? '660px' : '640px',
           },
           '@media (min-width: 1280px)': {
             width: '1000px',