From 945178de39004f7a97b550f2886640a7b1307bee Mon Sep 17 00:00:00 2001
From: Matthieu Jacq <67386567+matthieujacq@users.noreply.github.com>
Date: Wed, 4 Oct 2023 12:04:57 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=F0=9F=93=B1=20height=20now?=
 =?UTF-8?q?=20matches=20mobile=20height=20(#1323)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/app/chat/[chatId]/page.tsx         | 2 +-
 frontend/app/globals.css                    | 6 ++++++
 frontend/globals.css                        | 2 +-
 frontend/lib/components/Sidebar/Sidebar.tsx | 2 +-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/app/chat/[chatId]/page.tsx b/frontend/app/chat/[chatId]/page.tsx
index cb9c0268b..116d3e993 100644
--- 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
index 5001ce1a5..c207dceb6 100644
--- 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
index 96d8c4144..6b67b040c 100644
--- a/frontend/globals.css
+++ b/frontend/globals.css
@@ -37,4 +37,4 @@ a {
     /* background: #000; */
     @apply bg-gray-500;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/lib/components/Sidebar/Sidebar.tsx b/frontend/lib/components/Sidebar/Sidebar.tsx
index c991588f4..db2366d9b 100644
--- 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