mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-07-05 17:31:39 +02:00
MarekWo
8b36ff78bf
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>
72 lines
2.6 KiB
HTML
72 lines
2.6 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Chat - mc-webui{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid d-flex flex-column" style="height: 100%;">
|
|
<!-- Messages Container -->
|
|
<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 -->
|
|
<div class="text-center text-muted py-5">
|
|
<div class="spinner-border" role="status">
|
|
<span class="visually-hidden">Loading...</span>
|
|
</div>
|
|
<p class="mt-3">Loading messages...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send Message Form -->
|
|
<div class="row border-top bg-light">
|
|
<div class="col-12">
|
|
<form id="sendMessageForm" class="p-3">
|
|
<div class="input-group">
|
|
<textarea
|
|
id="messageInput"
|
|
class="form-control"
|
|
placeholder="Type a message..."
|
|
rows="2"
|
|
maxlength="200"
|
|
required
|
|
></textarea>
|
|
<button type="submit" class="btn btn-primary px-4" id="sendBtn">
|
|
<i class="bi bi-send"></i> Send
|
|
</button>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<small class="text-muted">Shift+Enter: new line, Enter: send</small>
|
|
<small id="charCounter" class="text-muted">0 / 200</small>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Status Bar -->
|
|
<div class="row border-top">
|
|
<div class="col-12">
|
|
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
|
|
<span id="statusText">
|
|
<i class="bi bi-circle-fill text-secondary"></i> Connecting...
|
|
</span>
|
|
<span id="lastRefresh">Last refresh: Never</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_scripts %}
|
|
<script>
|
|
// Pass configuration from Flask to JavaScript
|
|
window.MC_CONFIG = {
|
|
refreshInterval: {{ refresh_interval }} * 1000, // Convert to milliseconds
|
|
deviceName: "{{ device_name }}"
|
|
};
|
|
</script>
|
|
{% endblock %}
|