Fix page height on mobile devices

Was geting frustrated that I'd have to manually scroll down to see the chat input on my phone... This should fix it!
aws-samples · Mar 22, 2024 · 93f7d3e · 93f7d3e
1 parent 3b71097
commit 93f7d3e
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,7 +8,7 @@
       rel="stylesheet" />
     <link href="data:image/png;base64,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" rel="icon" type="image/x-icon">
   </head>
-  <body class="font-body">
+  <body class="min-h-dvh font-body">
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
     <!-- Vite＋AmplifyUIの際は以下の設定が必要 -->

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -57,14 +57,14 @@ const App: React.FC = () => {
         ),
       }}>
       {({ signOut }) => (
-        <div className="relative flex h-screen w-screen bg-aws-paper">
+        <div className="relative flex h-dvh w-screen bg-aws-paper">
           <ChatListDrawer
             onSignOut={() => {
               signOut ? signOut() : null;
             }}
           />
 
-          <main className="relative min-h-screen flex-1 overflow-y-hidden transition-width">
+          <main className="relative min-h-dvh flex-1 overflow-y-hidden transition-width">
             <header className="visible flex h-12 w-full items-center bg-aws-squid-ink p-3 text-lg text-aws-font-color-white lg:hidden lg:h-0">
               <button
                 className="mr-2 rounded-full p-2 hover:brightness-50 focus:outline-none focus:ring-1 "

diff --git a/frontend/src/components/ChatListDrawer.tsx b/frontend/src/components/ChatListDrawer.tsx
@@ -380,7 +380,7 @@ const ChatListDrawer: React.FC<Props> = (props) => {
           <PiX />
         </ButtonIcon>
         <div
-          className="fixed z-40 h-screen w-screen bg-dark-gray/90"
+          className="fixed z-40 h-dvh w-screen bg-dark-gray/90"
           onClick={switchOpen}></div>
       </div>
     </>

diff --git a/frontend/src/pages/NotFound.tsx b/frontend/src/pages/NotFound.tsx
@@ -5,7 +5,7 @@ import { PiSmileyXEyesFill } from 'react-icons/pi';
 const NotFound: React.FC = () => {
   const { t } = useTranslation();
   return (
-    <div className="flex h-screen flex-col items-center justify-center">
+    <div className="flex h-dvh flex-col items-center justify-center">
       <div className="flex text-5xl font-bold">
         <PiSmileyXEyesFill />
         404 ERROR