fix: 🐛📱 height now matches mobile height (QuivrHQ#1323)

ormwish · Oct 4, 2023 · 945178d · 945178d
1 parent bf5b755
commit 945178d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 3 deletions.
diff --git a/frontend/app/chat/[chatId]/page.tsx b/frontend/app/chat/[chatId]/page.tsx
@@ -12,7 +12,7 @@ const SelectedChatPage = (): JSX.Element => {
 
   return (
     <div
-      className={`flex flex-col flex-1 items-center justify-stretch w-full h-[100vh] overflow-hidden ${
+      className={`flex flex-col flex-1 items-center justify-stretch w-full h-fill-available overflow-hidden ${
         shouldDisplayFeedCard ? "bg-chat-bg-gray" : "bg-white"
       } dark:bg-black transition-colors ease-out duration-500`}
       data-testid="chat-page"

diff --git a/frontend/app/globals.css b/frontend/app/globals.css
@@ -41,4 +41,10 @@ div:focus {
     /* background: #000; */
     @apply bg-gray-500;
   }
+
+  .h-fill-available {
+    /* fixes the h-[100vh] issue on mobile */
+    /* like height: -webkit-fill-available; but for any device (android and iphone) */
+    @apply h-[100vh] supports-[height:100cqh]:h-[100cqh] supports-[height:100svh]:h-[100svh];
+  }
 }
diff --git a/frontend/globals.css b/frontend/globals.css
@@ -37,4 +37,4 @@ a {
     /* background: #000; */
     @apply bg-gray-500;
   }
-}
+}
diff --git a/frontend/lib/components/Sidebar/Sidebar.tsx b/frontend/lib/components/Sidebar/Sidebar.tsx
@@ -39,7 +39,7 @@ export const Sidebar = ({
             setOpen(false);
           }
         }}
-        className="flex flex-col fixed sm:sticky top-0 left-0 h-[100vh] overflow-visible z-30 border-r border-black/10 dark:border-white/25 bg-white dark:bg-black"
+        className="flex flex-col fixed sm:sticky top-0 left-0 h-fill-available overflow-visible z-30 border-r border-black/10 dark:border-white/25 bg-white dark:bg-black"
       >
         {!open && (
           <button