全体のUIをflexの形で調整

Author: KaichiManabe

web/app/chat/layout.tsx

@@ -10,9 +10,7 @@ export default function ChatPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="チャット/Chat" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="3_chat" />
     </NavigateByAuthState>
   );

web/app/friends/layout.tsx

@@ -10,9 +10,7 @@ export default function FriendsPageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="フレンド/Friends" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="1_friends" />
     </NavigateByAuthState>
   );

web/app/home/layout.tsx

@@ -10,9 +10,7 @@ export default function HomePageLayout({
   return (
     <NavigateByAuthState type="toLoginForUnauthenticated">
       <Header title="ホーム/Home" />
-      <div className="relative top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="0_home" />
     </NavigateByAuthState>
   );

web/app/layout.tsx

@@ -50,7 +50,7 @@ export default function RootLayout({
                 <AlertProvider>
                   <ModalProvider>
                     <BanLandscape />
-                    {children}
+                    <div className="flex h-screen flex-col">{children}</div>
                   </ModalProvider>
                 </AlertProvider>
               </AuthProvider>

web/app/search/layout.tsx

@@ -9,9 +9,7 @@ export default function HomePageLayout({
   return (
     <>
       <Header title="検索/Search" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="2_search" />
     </>
   );

web/app/settings/layout.tsx

@@ -9,9 +9,7 @@ export default function SettingsPageLayout({
   return (
     <>
       <Header title="設定/Settings" />
-      <div className="absolute top-14 right-0 bottom-14 left-0 overflow-y-auto sm:top-16">
-        {children}
-      </div>
+      <div className="grow overflow-y-auto">{children}</div>
       <BottomBar activeTab="4_settings" />
     </>
   );