Improve spacing for new list view and header

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',

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',

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"

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',