chore: tweak padding styles

web/src/components/MemoEditor/index.tsx

@@ -424,7 +424,7 @@ const MemoEditor = (props: Props) => {
       onCompositionEnd={() => setIsInIME(false)}
     >
       <Editor ref={editorRef} {...editorConfig} />
-      <div className="relative w-full flex flex-row justify-between items-center pt-2 z-1">
+      <div className="relative w-full flex flex-row justify-between items-center pt-2">
         <div className="flex flex-row justify-start items-center">
           <TagSelector onTagSelectorClick={(tag) => handleTagSelectorClick(tag)} />
           <IconButton

web/src/components/MobileHeader.tsx

@@ -17,7 +17,7 @@ const MobileHeader = (props: Props) => {
   return (
     <div
       className={classNames(
-        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 bg-zinc-100 dark:bg-zinc-800 bg-opacity-80 backdrop-blur-lg flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
+        "sticky top-0 pt-3 pb-2 sm:pt-2 px-4 sm:px-6 sm:mb-1 bg-zinc-100 dark:bg-zinc-800 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"
       )}
     >

web/src/components/Navigation.tsx

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

web/src/layouts/Root.tsx

@@ -9,7 +9,7 @@ function Root() {
     <div className="w-full min-h-full">
       <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 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">
+          <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 z-2">
             <Navigation />
           </div>
         )}

web/src/pages/Archived.tsx

@@ -30,9 +30,9 @@ const Archived = () => {
   }, [memos]);
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-start sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="w-full px-4">
+      <div className="w-full px-4 sm:px-6">
         {loadingState.isLoading ? (
           <div className="w-full h-32 flex flex-col justify-center items-center">
             <p className="opacity-70">{t("memo.fetching-data")}</p>

web/src/pages/Explore.tsx

@@ -54,9 +54,9 @@ const Explore = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="relative w-full h-auto flex flex-col justify-start items-start px-4">
+      <div className="relative w-full h-auto flex flex-col justify-start items-start px-4 sm:px-6">
         <MemoFilter />
         {sortedMemos.map((memo) => (
           <Memo key={memo.id} memo={memo} lazyRendering showCreator showParent />

web/src/pages/Home.tsx

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

web/src/pages/Inboxes.tsx

@@ -20,9 +20,9 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="w-full px-4">
+      <div className="w-full px-4 sm:px-6">
         <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">
           <div className="relative w-full flex flex-row justify-between items-center">
             <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">

web/src/pages/MemoDetail.tsx

@@ -110,9 +110,9 @@ const MemoDetail = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="w-full px-4">
+      <div className="w-full px-4 sm:px-6">
         <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">
           {memo.parent && (
             <div className="w-auto mb-2">

web/src/pages/Resources.tsx

@@ -66,9 +66,9 @@ const Resources = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="w-full px-4">
+      <div className="w-full px-4 sm:px-6">
         <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">
           <div className="relative w-full flex flex-row justify-between items-center">
             <p className="px-2 py-1 flex flex-row justify-start items-center select-none opacity-80">

web/src/pages/Setting.tsx

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

web/src/pages/Timeline.tsx

@@ -64,9 +64,9 @@ const Timeline = () => {
   };
 
   return (
-    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-6 pb-8">
+    <section className="@container w-full max-w-5xl min-h-full flex flex-col justify-start items-center sm:pt-3 md:pt-6 pb-8">
       <MobileHeader />
-      <div className="w-full px-4">
+      <div className="w-full px-4 sm:px-6">
         <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">
           <div className="relative w-full flex flex-row justify-start items-center">
             <p

web/src/pages/UserProfile.tsx

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