From 40bc8df63da0c951c970d87cdf87d8e63f708a71 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 18 Dec 2023 23:01:39 +0800
Subject: [PATCH] chore: fix container height

---
 web/src/components/DemoBanner.tsx | 2 +-
 web/src/css/global.css            | 6 +-----
 web/src/layouts/Root.tsx          | 2 +-
 web/src/pages/Loading.tsx         | 2 +-
 web/src/pages/SignIn.tsx          | 2 +-
 web/src/pages/SignUp.tsx          | 2 +-
 6 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/web/src/components/DemoBanner.tsx b/web/src/components/DemoBanner.tsx
index f69cd42b..18ffaa2e 100644
--- a/web/src/components/DemoBanner.tsx
+++ b/web/src/components/DemoBanner.tsx
@@ -23,7 +23,7 @@ const DemoBanner: React.FC = () => {
   if (!state.show) return null;
 
   return (
-    <div className="mt-4 flex flex-row items-center justify-center w-full rounded-lg sm:rounded-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
+    <div className="mt-4 flex flex-row items-center justify-center w-full rounded-lg py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-6xl px-4 flex flex-row justify-between items-center gap-x-3">
         <span>✨ A lightweight, self-hosted memo hub. Open Source and Free forever. ✨</span>
         <a className="btn-primary shadow" href="https://usememos.com/docs/install/self-hosting" target="_blank">
diff --git a/web/src/css/global.css b/web/src/css/global.css
index 7fc0f1dc..2b7dfa1a 100644
--- a/web/src/css/global.css
+++ b/web/src/css/global.css
@@ -1,11 +1,7 @@
-html {
-  @apply w-full h-full p-0 m-0;
-}
-
 body {
   @apply text-base w-full min-h-full p-0 m-0 bg-zinc-100 dark:bg-zinc-800;
 }
 
 #root {
-  @apply w-full min-h-full overflow-auto;
+  @apply relative w-full min-h-full;
 }
diff --git a/web/src/layouts/Root.tsx b/web/src/layouts/Root.tsx
index 97890e50..893483c9 100644
--- a/web/src/layouts/Root.tsx
+++ b/web/src/layouts/Root.tsx
@@ -15,7 +15,7 @@ function Root() {
           </div>
         )}
         <main className="w-full sm:px-4 h-auto flex-grow shrink flex flex-col justify-start items-center">
-          <div className="w-full px-4 h-auto flex flex-col justify-start items-center">
+          <div className="w-full px-4 sm:px-2 h-auto flex flex-col justify-start items-center">
             <DemoBanner />
           </div>
           <Outlet />
diff --git a/web/src/pages/Loading.tsx b/web/src/pages/Loading.tsx
index 9f324504..cf73dabd 100644
--- a/web/src/pages/Loading.tsx
+++ b/web/src/pages/Loading.tsx
@@ -2,7 +2,7 @@ import Icon from "@/components/Icon";
 
 function Loading() {
   return (
-    <div className="flex flex-row justify-center items-center w-full h-full">
+    <div className="fixed w-full h-full flex flex-row justify-center items-center">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-center items-center">
         <Icon.Loader className="animate-spin dark:text-gray-200" />
       </div>
diff --git a/web/src/pages/SignIn.tsx b/web/src/pages/SignIn.tsx
index 205d7181..f6031555 100644
--- a/web/src/pages/SignIn.tsx
+++ b/web/src/pages/SignIn.tsx
@@ -105,7 +105,7 @@ const SignIn = () => {
 
   return (
     <div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
-      <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
+      <div className="w-80 max-w-full h-full min-h-screen py-4 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="" />
diff --git a/web/src/pages/SignUp.tsx b/web/src/pages/SignUp.tsx
index dfdc7793..4e67c62f 100644
--- a/web/src/pages/SignUp.tsx
+++ b/web/src/pages/SignUp.tsx
@@ -71,7 +71,7 @@ const SignUp = () => {
 
   return (
     <div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
-      <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
+      <div className="w-80 max-w-full h-full min-h-screen py-4 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="" />