From 8b36ff78bf52809f54e9ee7ba425628abcfc5ae6 Mon Sep 17 00:00:00 2001 From: MarekWo Date: Sun, 21 Dec 2025 17:10:11 +0100 Subject: [PATCH] Fix: Mobile viewport height issue - use dvh and improve flexbox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed mobile browser viewport height issues where status bar and hint text were hidden: CSS changes: - Use 'height: 100dvh' (dynamic viewport height) for mobile browsers - Fallback to '100vh' for older browsers - Added 'min-height: 0' to main flex container (critical for flex children) HTML changes: - Added 'viewport-fit=cover' to meta tag (notched displays) - Improved flexbox structure in index.html - Added inline 'min-height: 0' on flex-grow-1 row (prevents overflow) The 'dvh' unit dynamically adjusts to browser chrome (URL bar) visibility, preventing layout shifts when scrolling on mobile. The min-height: 0 fix ensures flex children properly shrink when needed. This should fix the issue where bottom status bar disappears on mobile and top navbar disappears after sending a message. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- app/static/css/style.css | 4 +++- app/templates/base.html | 2 +- app/templates/index.html | 6 +++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/app/static/css/style.css b/app/static/css/style.css index 6b001ce..db5b849 100644 --- a/app/static/css/style.css +++ b/app/static/css/style.css @@ -8,7 +8,8 @@ /* Page Layout */ html, body { - height: 100vh; + height: 100vh; /* Fallback for older browsers */ + height: 100dvh; /* Dynamic viewport height (mobile-friendly) */ margin: 0; overflow: hidden; } @@ -23,6 +24,7 @@ main { overflow: hidden; display: flex; flex-direction: column; + min-height: 0; /* Important for flex children */ } /* Messages Container */ diff --git a/app/templates/base.html b/app/templates/base.html index 9b1de4a..ddbf116 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -2,7 +2,7 @@ - + {% block title %}mc-webui{% endblock %} diff --git a/app/templates/index.html b/app/templates/index.html index 5ad9fa6..6ef7a52 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -3,10 +3,10 @@ {% block title %}Chat - mc-webui{% endblock %} {% block content %} -
+
-
-
+
+