chore: tweak padding

web/src/components/HomeSidebar.tsx

@@ -4,7 +4,7 @@ import UsageHeatMap from "./UsageHeatMap";
 
 const HomeSidebar = () => {
   return (
-    <aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4">
+    <aside className="relative w-full pr-2 h-full max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start py-4 sm:pt-6">
       <div className="px-4 pr-8 mb-4 w-full">
         <SearchBar />
       </div>

web/src/components/Navigation.tsx

@@ -98,9 +98,9 @@ const Navigation = () => {
     : [exploreNavLink, signInNavLink];
 
   return (
-    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 z-30">
+    <header className="w-full h-full overflow-auto flex flex-col justify-start items-start py-4 sm:pt-6 z-30">
       <UserBanner />
-      <div className="w-full px-2 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
+      <div className="w-full px-1 py-2 flex flex-col justify-start items-start shrink-0 space-y-2">
         {navLinks.map((navLink) => (
           <NavLink
             key={navLink.id}

web/src/components/UserBanner.tsx

@@ -33,7 +33,7 @@ const UserBanner = () => {
   };
 
   return (
-    <div className="relative w-full h-auto px-2 shrink-0">
+    <div className="relative w-full h-auto px-1 shrink-0">
       <Dropdown
         className="w-auto"
         trigger={

web/src/layouts/Root.tsx

@@ -7,9 +7,9 @@ function Root() {
 
   return (
     <div className="w-full min-h-full">
-      <div className="w-full sm:pl-56 mx-auto flex flex-row justify-center items-start">
+      <div className="w-full sm:pl-56 md:pl-64 mx-auto flex flex-row justify-center items-start">
         {sm && (
-          <div className="hidden sm:block fixed top-0 left-0 w-56 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
+          <div className="hidden sm:block fixed top-0 left-0 w-56 md:w-64 px-4 border-r dark:border-zinc-800 h-full bg-zinc-50 dark:bg-zinc-700 dark:bg-opacity-40 transition-all hover:shadow-xl">
             <Navigation />
           </div>
         )}

web/src/pages/Archived.tsx

@@ -30,7 +30,7 @@ const Archived = () => {
   }, [memos]);
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         {loadingState.isLoading ? (

web/src/pages/Explore.tsx

@@ -54,7 +54,7 @@ const Explore = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="relative w-full h-auto flex flex-col justify-start items-start px-4">
         <MemoFilter />

web/src/pages/Home.tsx

@@ -9,10 +9,10 @@ const Home = () => {
   const { md } = useResponsiveWidth();
 
   return (
-    <div className="w-full max-w-4xl flex flex-row justify-center items-start">
-      <div className="w-full sm:pt-4">
+    <div className="w-full max-w-5xl flex flex-row justify-center items-start">
+      <div className="w-full sm:pt-6">
         <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
-        <div className="w-full px-4 md:pr-2">
+        <div className="w-full px-4 sm:px-6 md:pr-2">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <MemoList />
         </div>

web/src/pages/Inboxes.tsx

@@ -20,7 +20,7 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

web/src/pages/MemoDetail.tsx

@@ -110,7 +110,7 @@ const MemoDetail = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="relative flex-grow w-full min-h-full flex flex-col justify-start items-start border dark:border-zinc-700 bg-white dark:bg-zinc-700 shadow hover:shadow-xl transition-all p-4 pb-3 rounded-lg">

web/src/pages/Resources.tsx

@@ -66,7 +66,7 @@ const Resources = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

web/src/pages/Setting.tsx

@@ -42,7 +42,7 @@ const Setting = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-start sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="setting-page-wrapper">

web/src/pages/Timeline.tsx

@@ -64,7 +64,7 @@ const Timeline = () => {
   };
 
   return (
-    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4">
         <div className="w-full shadow flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">

web/src/pages/UserProfile.tsx

@@ -35,7 +35,7 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
+    <section className="w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
       <MobileHeader />
       <div className="w-full px-4 flex flex-col justify-start items-center">
         {!loadingState.isLoading &&