Merge pull request #2584 from omnivore-app/fix/web-hover-cards

Lower z-index for hover actions so they dont display over header, improve header on small screens

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

@@ -24,17 +24,24 @@ export const MenuStyle = {
 
 export const MetaStyle = {
   width: '100%',
-  color: '$thTextSubtle3',
+  color: '$thTextSubtle2',
   fontSize: '12px',
-  fontWeight: '400',
+  fontWeight: '500',
   fontFamily: '$display',
+  maxLines: 1,
+  textOverflow: 'ellipsis',
+  wordBreak: 'break-word',
+  lineHeight: 1.1,
+  overflowX: 'hidden',
+  overflowY: 'visible',
 }
 
 export const TitleStyle = {
   color: '$thTextContrast2',
   fontSize: '16px',
   fontWeight: '700',
-  lineHeight: '1',
+  maxLines: 2,
+  lineHeight: '1.25',
   fontFamily: '$display',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -66,8 +73,7 @@ export const AuthorInfoStyle = {
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   maxWidth: '240px',
-  overflow: 'hidden',
-  color: '$thTextSubtle3',
+  color: '$thNotebookSubtle',
   fontSize: '12px',
   fontWeight: '400',
   fontFamily: '$display',

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -89,7 +89,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
       {!isTouchScreenDevice() && (
         <Box
           ref={refs.setFloating}
-          style={{ ...floatingStyles, zIndex: 10 }}
+          style={{ ...floatingStyles, zIndex: 3 }}
           {...getFloatingProps()}
         >
           <LibraryHoverActions
@@ -222,7 +222,6 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
           minHeight: '35px',
           pt: '15px',
           px: '15px',
-          color: '$grayText',
         }}
         distribution="start"
       >
@@ -237,8 +236,6 @@ const LibraryGridCardContent = (props: LinkedItemCardProps): JSX.Element => {
         <Box
           css={{
             ...TitleStyle,
-            maxLines: 2,
-            lineHeight: 1.25,
             height: '42px',
           }}
         >

packages/web/components/patterns/LibraryCards/LibraryListCard.tsx

@@ -60,8 +60,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
       css={{
         px: '20px',
         pl: '10px',
-        pt: '20px',
-        pb: '20px',
+        py: '15px',
         height: '100%',
         cursor: 'pointer',
         gap: '10px',
@@ -100,7 +99,7 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
       {!isTouchScreenDevice() && (
         <Box
           ref={refs.setFloating}
-          style={floatingStyles}
+          style={{ ...floatingStyles, zIndex: 3 }}
           {...getFloatingProps()}
         >
           <LibraryHoverActions
@@ -271,31 +270,21 @@ 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,
           }}
+          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',
             }}
           >
             {props.item.author}
@@ -304,7 +293,7 @@ export function LibraryListCardContent(
               {originText}
             </SpanBox>
           </SpanBox>
-        </VStack>
+        )}
 
         <HStack
           distribution="start"

packages/web/components/templates/homeFeed/LibraryHeader.tsx

@@ -576,12 +576,13 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
         distribution={props.multiSelectMode !== 'off' ? 'center' : 'start'}
         css={{
           gap: '10px',
+          width: '95%',
           '@mdDown': {
+            width: props.multiSelectMode !== 'off' ? '100%' : '95%',
             display: props.multiSelectMode !== 'off' ? 'flex' : 'none',
           },
-          width: '95%',
           '@media (min-width: 930px)': {
-            width: '660px',
+            width: props.layout == 'GRID_LAYOUT' ? '660px' : '640px',
           },
           '@media (min-width: 1280px)': {
             width: '1000px',
@@ -599,9 +600,6 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
               display: 'flex',
               gap: '2px',
               alignItems: 'center',
-              '@mdDown': {
-                mx: '20px',
-              },
             }}
           >
             <SpanBox