adam/mc-webui
1
0
Fork 0
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-07-07 02:10:58 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Mobile viewport height issue - use dvh and improve flexbox

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2025-12-21 17:10:11 +01:00
parent f361ebee09
commit 8b36ff78bf
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>{% block title %}mc-webui{% endblock %}</title>
<!-- Bootstrap 5 CSS -->