From 1acf0b576590e625308c01c55f12a66fa4879f1c Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 25 Jun 2024 15:22:30 +0800
Subject: [PATCH] Improve smaller screen layouts

---
 .../templates/library/LibraryContainer.tsx    |  5 +++-
 .../templates/library/LibraryHeader.tsx       | 25 ++-----------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/packages/web/components/templates/library/LibraryContainer.tsx b/packages/web/components/templates/library/LibraryContainer.tsx
index 07803490f..5aad30ace 100644
--- a/packages/web/components/templates/library/LibraryContainer.tsx
+++ b/packages/web/components/templates/library/LibraryContainer.tsx
@@ -934,7 +934,7 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
         py: '20px',
         width: '100%',
         '@mdDown': {
-          px: layout == 'GRID_LAYOUT' ? '20px' : '0px',
+          px: '0px',
         },
       }}
       distribution="start"
@@ -1030,6 +1030,9 @@ export function LibraryItemsLayout(
           height: '100%',
           width: '100%',
           paddingX: '40px',
+          '@mdDown': {
+            mx: props.layout == 'GRID_LAYOUT' ? '20px' : '0px',
+          },
         }}
       >
         <Toaster />
diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx
index a0625a8f6..23123d81f 100644
--- a/packages/web/components/templates/library/LibraryHeader.tsx
+++ b/packages/web/components/templates/library/LibraryHeader.tsx
@@ -38,27 +38,6 @@ export type LibraryHeaderProps = {
   performMultiSelectAction: (action: BulkAction, labelIds?: string[]) => void
 }
 
-export const headerControlWidths = (
-  layout: LayoutType,
-  multiSelectMode: MultiSelectMode
-) => {
-  return {
-    width: '95%',
-    '@mdDown': {
-      width: '100%',
-    },
-    '@media (min-width: 930px)': {
-      width: '620px',
-    },
-    '@media (min-width: 1280px)': {
-      width: '940px',
-    },
-    '@media (min-width: 1600px)': {
-      width: '1232px',
-    },
-  }
-}
-
 export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
   const [small, setSmall] = useState(false)
 
@@ -89,8 +68,8 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
             right: '0',
           },
           '@xlgDown': {
-            px: props.showFilterMenu ? '0px' : '40px',
-            pr: '0px',
+            px: props.showFilterMenu ? '0px' : '60px',
+            pr: '10px',
           },
         }}
       >