chore: tweak responsible styles

store/db/sqlite/seed/10002__memo.sql

@@ -20,8 +20,7 @@ VALUES
     '#TODO 
 - [x] Take more photos about **🌄 sunset**;
 - [x] Clean the room;
-- [ ] Read *📖 The Little Prince*;
-(👆 click to toggle status)',
+- [ ] Read *📖 The Little Prince*;',
     101,
     'PROTECTED'
   );

web/src/components/MemoEditor/index.tsx

@@ -72,7 +72,6 @@ const MemoEditor = (props: Props) => {
 
   useEffect(() => {
     editorRef.current?.setContent(contentCache || "");
-    handleEditorFocus();
   }, []);
 
   useEffect(() => {

web/src/components/MobileHeader.tsx

@@ -1,4 +1,6 @@
+import classNames from "classnames";
 import { useState } from "react";
+import { useWindowScroll } from "react-use";
 import useResponsiveWidth from "@/hooks/useResponsiveWidth";
 import NavigationDrawer from "./NavigationDrawer";
 
@@ -10,9 +12,15 @@ const MobileHeader = (props: Props) => {
   const { children } = props;
   const { sm } = useResponsiveWidth();
   const [titleText] = useState("MEMOS");
+  const { y: offsetTop } = useWindowScroll();
 
   return (
-    <div className="sticky top-0 pt-4 sm:pt-1 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2">
+    <div
+      className={classNames(
+        "sticky top-0 pt-4 sm:pt-1 px-4 pb-1 mb-1 backdrop-blur flex md:hidden flex-row justify-between items-center w-full h-auto flex-nowrap shrink-0 z-2",
+        offsetTop > 0 && "shadow-md"
+      )}
+    >
       <div className="flex flex-row justify-start items-center mr-2 shrink-0 overflow-hidden">
         {!sm && <NavigationDrawer />}
         <span

web/src/css/global.css

@@ -1,5 +1,5 @@
 body {
-  @apply text-base w-full min-h-full p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
+  @apply text-base w-full min-h-[100svh] p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
 }
 
 #root {

web/src/layouts/Root.tsx

@@ -13,7 +13,7 @@ function Root() {
             <Navigation />
           </div>
         )}
-        <main className="w-full sm:px-4 h-auto flex-grow shrink flex flex-col justify-start items-center">
+        <main className="w-full h-auto flex-grow shrink flex flex-col justify-start items-center">
           <Outlet />
         </main>
       </div>

web/src/pages/Archived.tsx

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

web/src/pages/Explore.tsx

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

web/src/pages/Home.tsx

@@ -9,14 +9,16 @@ const Home = () => {
   const { md } = useResponsiveWidth();
 
   return (
-    <div className="w-full flex flex-row justify-center items-start">
-      <div className="w-full px-4 max-w-3xl sm:px-2 sm:pt-4">
+    <div className="w-full max-w-4xl flex flex-row justify-center items-start">
+      <div className="w-full sm:pt-4">
         <MobileHeader>{!md && <HomeSidebarDrawer />}</MobileHeader>
+        <div className="w-full px-4 md:pr-2">
           <MemoEditor className="mb-2" cacheKey="home-memo-editor" />
           <MemoList />
         </div>
+      </div>
       {md && (
-        <div className="hidden md:block sticky top-0 left-0 w-56">
+        <div className="hidden md:block sticky top-0 left-0 shrink-0 w-56">
           <HomeSidebar />
         </div>
       )}

web/src/pages/Inboxes.tsx

@@ -20,8 +20,9 @@ const Inboxes = () => {
   }, []);
 
   return (
-    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 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">
           <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">
@@ -47,6 +48,7 @@ const Inboxes = () => {
             </div>
           </div>
         </div>
+      </div>
     </section>
   );
 };

web/src/pages/MemoDetail.tsx

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

web/src/pages/Resources.tsx

@@ -66,8 +66,9 @@ const Resources = () => {
   };
 
   return (
-    <section className="@container w-full max-w-3xl min-h-full flex flex-col justify-start items-center px-4 sm:px-2 sm:pt-4 pb-8">
+    <section className="@container w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 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">
           <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">
@@ -168,6 +169,7 @@ const Resources = () => {
             )}
           </div>
         </div>
+      </div>
     </section>
   );
 };

web/src/pages/Setting.tsx

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

web/src/pages/SignIn.tsx

@@ -104,7 +104,7 @@ const SignIn = () => {
   };
 
   return (
-    <div className="pt-12 pb-8 w-80 max-w-full h-auto mx-auto flex flex-col justify-start items-center">
+    <div className="py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
       <div className="w-full py-4 grow flex flex-col justify-center items-center">
         <div className="w-full flex flex-row justify-center items-center mb-6">
           <img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />

web/src/pages/SignUp.tsx

@@ -70,7 +70,7 @@ const SignUp = () => {
   };
 
   return (
-    <div className="pt-12 pb-8 w-80 max-w-full h-auto mx-auto flex flex-col justify-start items-center">
+    <div className="py-8 w-80 max-w-full min-h-[100svh] mx-auto flex flex-col justify-start items-center">
       <div className="w-full py-4 grow flex flex-col justify-center items-center">
         <div className="w-full flex flex-row justify-center items-center mb-6">
           <img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />

web/src/pages/Timeline.tsx

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

web/src/pages/UserProfile.tsx

@@ -35,28 +35,20 @@ const UserProfile = () => {
   }, [params.username]);
 
   return (
-    <section className="relative top-0 w-full min-h-full overflow-x-hidden">
+    <section className="w-full max-w-4xl min-h-full flex flex-col justify-start items-center sm:pt-4 pb-8">
       <MobileHeader />
-      <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center">
+      <div className="w-full px-4 flex flex-col justify-start items-center">
         {!loadingState.isLoading &&
           (user ? (
             <>
-              <div className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
-                <div className="w-full flex flex-row justify-start items-start">
-                  <div className="flex-grow shrink w-full">
               <div className="w-full flex flex-col justify-start items-center py-8">
                 <UserAvatar className="!w-20 !h-20 mb-2 drop-shadow" avatarUrl={user?.avatarUrl} />
                 <p className="text-3xl text-black opacity-80 dark:text-gray-200">{user?.nickname}</p>
               </div>
               <MemoList />
-                  </div>
-                </div>
-              </div>
             </>
           ) : (
-            <>
             <p>Not found</p>
-            </>
           ))}
       </div>
     </section>