From a181c8b3841b02982637a281d74987ffbd21cf45 Mon Sep 17 00:00:00 2001 From: Pierre LE GUEN <26087574+PierreLeGuen@users.noreply.github.com> Date: Tue, 3 Mar 2026 17:55:52 -0800 Subject: [PATCH] fix(web): mobile browser bar obscures chat input (#508) * fix(web): use dvh units to prevent mobile browser bar from obscuring chat input On mobile browsers (Brave/Android, Safari/iOS), the bottom navigation bar covers the chat input because 100vh includes space behind browser chrome. Switch to 100dvh (dynamic viewport height) with vh fallback for older browsers, and add safe-area-inset padding for notched devices. Co-Authored-By: Claude Opus 4.6 * Fix padding declaration in chat input style --------- Co-authored-by: Claude Opus 4.6 Co-authored-by: Illia Polosukhin --- src/channels/web/static/index.html | 2 +- src/channels/web/static/style.css | 6 +++++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/channels/web/static/index.html b/src/channels/web/static/index.html index 5303ffff..600c533e 100644 --- a/src/channels/web/static/index.html +++ b/src/channels/web/static/index.html @@ -2,7 +2,7 @@ - + IronClaw diff --git a/src/channels/web/static/style.css b/src/channels/web/static/style.css index 7f24843d..fff02231 100644 --- a/src/channels/web/static/style.css +++ b/src/channels/web/static/style.css @@ -30,6 +30,7 @@ body { background: var(--bg); color: var(--text); height: 100vh; + height: 100dvh; display: flex; flex-direction: column; overflow: hidden; @@ -41,6 +42,7 @@ body { align-items: center; justify-content: center; height: 100vh; + height: 100dvh; } .auth-card-login { @@ -141,6 +143,7 @@ body { display: none; flex-direction: column; height: 100vh; + height: 100dvh; } /* Tab Bar */ @@ -987,7 +990,7 @@ body { /* Chat input */ .chat-input { display: flex; - padding: 12px 16px; + padding: 12px 16px max(12px, env(safe-area-inset-bottom)) 16px; gap: 8px; background: var(--bg-secondary); border-top: 1px solid var(--border); @@ -1808,6 +1811,7 @@ body { .job-files { display: flex; height: calc(100vh - 280px); + height: calc(100dvh - 280px); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;