From e9a2d6c5b434155fb36bc6dd00bcd33f3211080f Mon Sep 17 00:00:00 2001
From: Bekiboo <julien.connault@gmail.com>
Date: Mon, 15 Jun 2026 10:15:27 +0300
Subject: [PATCH] fix(blabsy): use dynamic viewport height so the chat composer
 isn't hidden by browser UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The chat layout sized its containers with calc(100vh - ...). On mobile
browsers 100vh is the largest viewport height (as if the browser chrome
were hidden), so the fixed-height chat column overflowed the visible area
and the message input was pushed behind the browser's navigation bar —
unreachable, so tapping it never opened the keyboard. Installed as a PWA
there is no browser chrome, which is why it only reproduced in-browser.

Switch the chat containers from 100vh to 100dvh (dynamic viewport height)
so they track the actually-visible area. dvh equals vh when there is no
browser chrome (PWA / desktop), so no regression there.

Verified on a real Android device (Chrome): the composer now sits above
the navigation bar and stays reachable with the keyboard open.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 platforms/blabsy/client/src/components/chat/chat.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/platforms/blabsy/client/src/components/chat/chat.tsx b/platforms/blabsy/client/src/components/chat/chat.tsx
index bd4789b3d..54a1ab821 100644
--- a/platforms/blabsy/client/src/components/chat/chat.tsx
+++ b/platforms/blabsy/client/src/components/chat/chat.tsx
@@ -12,11 +12,11 @@ export function Chat(): JSX.Element {
         return (
             <main className='min-h-full w-full max-w-5xl pt-8 pb-8'>
                 {currentChat ? (
-                    <div className='h-[calc(100vh-6rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+                    <div className='h-[calc(100dvh-6rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
                         <ChatWindow />
                     </div>
                 ) : (
-                    <div className='h-[calc(100vh-6rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
+                    <div className='h-[calc(100dvh-6rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
                         <ChatList />
                     </div>
                 )}
@@ -27,11 +27,11 @@ export function Chat(): JSX.Element {
     // On desktop, show both in grid layout
     return (
         <main className='min-h-full w-full max-w-5xl pt-8'>
-            <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
-                <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
+            <div className='grid h-[calc(100dvh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
+                <div className='h-[calc(100dvh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
                     <ChatList />
                 </div>
-                <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+                <div className='h-[calc(100dvh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
                     <ChatWindow />
                 </div>
             </div>