From 032b28ba79995584a7d6b820a1d2ce97e165100a Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 9 Jun 2023 17:30:24 +0800
Subject: [PATCH] Improve list layout

---
 .../patterns/LibraryCards/LibraryListCard.tsx          | 10 ++++------
 .../templates/homeFeed/LibraryFilterMenu.tsx           |  5 -----
 2 files changed, 4 insertions(+), 11 deletions(-)

diff --git a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
index 8e73855d4..2ee000a48 100644
--- a/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
+++ b/packages/web/components/patterns/LibraryCards/LibraryListCard.tsx
@@ -15,6 +15,7 @@ import {
   TitleStyle,
 } from './LibraryCardStyles'
 import { sortedLabels } from '../../../lib/labelsSort'
+import { LIBRARY_LEFT_MENU_WIDTH } from '../../templates/homeFeed/LibraryFilterMenu'
 
 export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
@@ -28,12 +29,9 @@ export function LibraryListCard(props: LinkedItemCardProps): JSX.Element {
         gap: '10px',
         border: '1px solid $grayBorder',
         borderBottom: 'none',
-
-        '@xlgDown': {
-          width: 'unset',
-          borderRadius: 'unset',
-          borderLeft: 'unset',
-          borderRight: 'unset',
+        width: '100vw',
+        '@media (min-width: 768px)': {
+          width: `calc(100vw - ${LIBRARY_LEFT_MENU_WIDTH})`,
         },
         '@media (min-width: 930px)': {
           width: '640px',
diff --git a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
index 22ff5fcb5..b181a5fce 100644
--- a/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
@@ -52,11 +52,6 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
             width: '100%',
             px: '25px',
             pb: '25px',
-
-            // '@lg': {
-            //   display: props.alwaysDisplayToolbar ? 'flex' : 'none',
-            // },
-            // '@mdDown': { px: '15px' },
           }}
         >
           <LogoBox />