From 12fd8f34bed78b0831dc11660f9356c06c823268 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sat, 21 Oct 2023 01:23:21 +0800
Subject: [PATCH] chore: fix styles

---
 web/src/layouts/Root.tsx      |  2 +-
 web/src/pages/DailyReview.tsx | 31 ++++++++++++++++---------------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index d2866708c..d7631439e 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -10,7 +10,7 @@ function Root() {
       </div>
       <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <Header />
-        <main className="w-full h-screen sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
+        <main className="w-full min-h-screen sm:max-w-[calc(100%-14rem)] flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />
         </main>
       </div>
diff --git a/web/src/pages/DailyReview.tsx b/web/src/pages/DailyReview.tsx
index aa919df44..458a280e8 100644
--- a/web/src/pages/DailyReview.tsx
+++ b/web/src/pages/DailyReview.tsx
@@ -68,14 +68,23 @@ const DailyReview = () => {
     <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 bg-zinc-100 dark:bg-zinc-800">
       <MobileHeader showSearch={false} />
       <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">
+        <div className="relative w-full flex flex-row justify-start items-center">
           <p
-            className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
+            className="px-2 py-1 mr-2 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
             onClick={() => toggleShowDatePicker()}
           >
             <Icon.Calendar className="w-5 h-auto mr-2" />
             <span className="font-mono mt-0.5">{new Date(selectedDateStamp).toLocaleDateString()}</span>
           </p>
+          {selectedDateStamp !== currentDateStamp && (
+            <Button
+              variant="outlined"
+              startDecorator={<Icon.Undo2 className="w-5 h-auto" />}
+              onClick={() => setSelectedDateStamp(currentDateStamp)}
+            >
+              {"Back to today"}
+            </Button>
+          )}
           <DatePicker
             className={`absolute top-8 mt-2 z-20 mx-auto border bg-white shadow dark:bg-zinc-800 dark:border-zinc-800 rounded-lg mb-6 ${
               showDatePicker ? "" : "!hidden"
@@ -115,19 +124,11 @@ const DailyReview = () => {
               </div>
             ))}
 
-            <div className="w-full sm:mt-4">
-              {selectedDateStamp === currentDateStamp ? (
-                <div className="w-full pl-0 sm:pl-10">
-                  <MemoEditor className="!border" cacheKey="daily-review-editor" />
-                </div>
-              ) : (
-                <div className="w-full flex flex-row justify-center items-center">
-                  <Button startDecorator={<Icon.Undo2 className="w-5 h-auto" />} onClick={() => setSelectedDateStamp(currentDateStamp)}>
-                    {"Back to today"}
-                  </Button>
-                </div>
-              )}
-            </div>
+            {selectedDateStamp === currentDateStamp && (
+              <div className="w-full pl-0 sm:pl-10 sm:mt-4">
+                <MemoEditor className="!border" cacheKey="daily-review-editor" />
+              </div>
+            )}
           </div>
         </div>
       </div>