From 6320d042c81da2684ea04031d4a0195f024f4e03 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Thu, 4 Jan 2024 22:50:46 +0800
Subject: [PATCH] chore: update home padding styles

---
 web/src/components/HomeSidebar.tsx       | 2 +-
 web/src/components/HomeSidebarDrawer.tsx | 2 +-
 web/src/components/MobileHeader.tsx      | 6 ++++--
 web/src/pages/Home.tsx                   | 6 +++---
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/web/src/components/HomeSidebar.tsx b/web/src/components/HomeSidebar.tsx
index 863d7688..38d3cf37 100644
--- a/web/src/components/HomeSidebar.tsx
+++ b/web/src/components/HomeSidebar.tsx
@@ -7,7 +7,7 @@ const HomeSidebar = () => {
   const currentUser = useCurrentUser();
 
   return (
-    <aside className="relative w-full px-4 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
+    <aside className="relative w-full h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
       <SearchBar />
       <PersonalStatistics user={currentUser} />
       <TagList />
diff --git a/web/src/components/HomeSidebarDrawer.tsx b/web/src/components/HomeSidebarDrawer.tsx
index 266a7d06..c881668a 100644
--- a/web/src/components/HomeSidebarDrawer.tsx
+++ b/web/src/components/HomeSidebarDrawer.tsx
@@ -26,7 +26,7 @@ const HomeSidebarDrawer = () => {
         <Icon.Search className="w-5 h-auto dark:text-gray-400" />
       </IconButton>
       <Drawer anchor="right" size="sm" open={open} onClose={toggleDrawer(false)}>
-        <div className="w-full h-full px-1 bg-zinc-100 dark:bg-zinc-900">
+        <div className="w-full h-full px-5 bg-zinc-100 dark:bg-zinc-900">
           <HomeSidebar />
         </div>
       </Drawer>
diff --git a/web/src/components/MobileHeader.tsx b/web/src/components/MobileHeader.tsx
index 754ae8bd..849ecd91 100644
--- a/web/src/components/MobileHeader.tsx
+++ b/web/src/components/MobileHeader.tsx
@@ -5,11 +5,12 @@ import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import NavigationDrawer from "./NavigationDrawer";
 
 interface Props {
+  className?: string;
   children?: React.ReactNode;
 }
 
 const MobileHeader = (props: Props) => {
-  const { children } = props;
+  const { className, children } = props;
   const { sm } = useResponsiveWidth();
   const [titleText] = useState("Memos");
   const { y: offsetTop } = useWindowScroll();
@@ -18,7 +19,8 @@ const MobileHeader = (props: Props) => {
     <div
       className={classNames(
         "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-900 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-1",
-        offsetTop > 0 && "shadow-md"
+        offsetTop > 0 && "shadow-md",
+        className
       )}
     >
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index b2bfe1c3..c73f661b 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -61,10 +61,10 @@ const Home = () => {
   };
 
   return (
-    <div className="w-full max-w-5xl flex flex-row justify-center items-start">
+    <div className="w-full max-w-5xl sm:px-6 flex flex-row justify-center items-start sm:gap-6">
       <div className={classNames("w-full sm:pt-3 md:pt-6", md && "max-w-[calc(100%-14rem)]")}>
-        <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
-        <div className="w-full px-4 sm:px-6 md:pr-2">
+        <MobileHeader className="sm:px-0">{!md && <HomeSidebarDrawer />}</MobileHeader>
+        <div className="w-full px-4 sm:px-0">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <div className="flex flex-col justify-start items-start w-full max-w-full pb-28">
             <MemoFilter />