From 3e0ed32e14b729a9541e6f0e107a02343859657f Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 25 Jun 2024 14:45:18 +0800
Subject: [PATCH 1/3] Improve layout of highlights on smaller screens

---
 .../web/components/nav-containers/HighlightsContainer.tsx  | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/nav-containers/HighlightsContainer.tsx b/packages/web/components/nav-containers/HighlightsContainer.tsx
index 52403ff1d..5a74fe514 100644
--- a/packages/web/components/nav-containers/HighlightsContainer.tsx
+++ b/packages/web/components/nav-containers/HighlightsContainer.tsx
@@ -70,9 +70,12 @@ export function HighlightsContainer(): JSX.Element {
   return (
     <VStack
       css={{
-        maxWidth: '70%',
         padding: '20px',
-        margin: '30px 50px 0 0',
+        margin: '30px',
+        '@mdDown': {
+          margin: '0px',
+          marginTop: '50px',
+        },
       }}
     >
       {highlights.map((highlight) => {

From 0402d1d60d967c15af9e4a28b26a1d03ecea4009 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Tue, 25 Jun 2024 14:49:24 +0800
Subject: [PATCH 2/3] Remove right padding on search bar in small screens

---
 packages/web/components/templates/library/LibraryHeader.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/components/templates/library/LibraryHeader.tsx b/packages/web/components/templates/library/LibraryHeader.tsx
index 03865b4e1..a0625a8f6 100644
--- a/packages/web/components/templates/library/LibraryHeader.tsx
+++ b/packages/web/components/templates/library/LibraryHeader.tsx
@@ -90,6 +90,7 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
           },
           '@xlgDown': {
             px: props.showFilterMenu ? '0px' : '40px',
+            pr: '0px',
           },
         }}
       >

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 3/3] 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',
           },
         }}
       >