From 955be7b91ee08c25541685b382fabf47e98de2e4 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Wed, 28 Feb 2024 13:14:09 +0800
Subject: [PATCH] Left alignment of the library items

---
 .../web/components/templates/homeFeed/LibraryHeader.tsx  | 4 +++-
 packages/web/pages/home.tsx                              | 9 +++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web/components/templates/homeFeed/LibraryHeader.tsx b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
index af7defa9f..c981654b2 100644
--- a/packages/web/components/templates/homeFeed/LibraryHeader.tsx
+++ b/packages/web/components/templates/homeFeed/LibraryHeader.tsx
@@ -85,18 +85,20 @@ export function LibraryHeader(props: LibraryHeaderProps): JSX.Element {
   return (
     <>
       <VStack
-        alignment="center"
+        alignment="start"
         distribution="start"
         css={{
           top: '0',
           right: '0',
           zIndex: 5,
+          px: '70px',
           bg: '$thLibraryBackground',
           position: 'fixed',
           left: LIBRARY_LEFT_MENU_WIDTH,
           height: small ? '60px' : DEFAULT_HEADER_HEIGHT,
           transition: 'height 0.5s',
           '@mdDown': {
+            px: '0px',
             left: '0px',
             right: '0',
           },
diff --git a/packages/web/pages/home.tsx b/packages/web/pages/home.tsx
index 612d28d97..1935d846b 100644
--- a/packages/web/pages/home.tsx
+++ b/packages/web/pages/home.tsx
@@ -16,9 +16,14 @@ function LoadedContent(): JSX.Element {
       pageTestId="home-page-tag"
     >
       <VStack
-        alignment="center"
+        alignment="start"
         distribution="center"
-        css={{ backgroundColor: '$thLibraryBackground' }}
+        css={{
+          px: '70px',
+          backgroundColor: '$thLibraryBackground',
+          '@lgDown': { px: '20px' },
+          '@mdDown': { px: '10px' },
+        }}
       >
         <HomeFeedContainer />
       </VStack>