iarv/mc-webui
1
0
Fork 1
mirror of https://github.com/MarekWo/mc-webui.git synced 2026-05-05 04:52:34 +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

4
app/static/css/style.css
View File

@@ -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 */

2
app/templates/base.html
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 -->

6
app/templates/index.html
View File

@@ -3,10 +3,10 @@
{% block title %}Chat - mc-webui{% endblock %}
{% block content %}
<div class="container-fluid h-100 d-flex flex-column">
<div class="container-fluid d-flex flex-column" style="height: 100%;">
<!-- Messages Container -->
<div class="row flex-grow-1 overflow-hidden">
<div class="col-12 h-100">
<div class="row flex-grow-1 overflow-hidden" style="min-height: 0;">
<div class="col-12" style="height: 100%;">
<div id="messagesContainer" class="messages-container h-100 overflow-auto p-3">
<div id="messagesList">
<!-- Messages will be loaded here via JavaScript -->