mirror of
https://github.com/MarekWo/mc-webui.git
synced 2026-08-04 07:52:46 +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>
95 lines
3.7 KiB
HTML
95 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title>{% block title %}mc-webui{% endblock %}</title>
|
|
|
|
<!-- Bootstrap 5 CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Bootstrap Icons -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
|
|
{% block extra_head %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Navbar -->
|
|
<nav class="navbar navbar-dark bg-primary">
|
|
<div class="container-fluid">
|
|
<span class="navbar-brand mb-0 h1">
|
|
<i class="bi bi-broadcast"></i> mc-webui
|
|
{% if device_name %}
|
|
<small class="text-white-50">- {{ device_name }}</small>
|
|
{% endif %}
|
|
</span>
|
|
<div class="d-flex align-items-center">
|
|
<button class="btn btn-outline-light btn-sm me-2" id="refreshBtn" title="Refresh messages">
|
|
<i class="bi bi-arrow-clockwise"></i> Refresh
|
|
</button>
|
|
<button class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#settingsModal" title="Settings">
|
|
<i class="bi bi-gear"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Settings Modal -->
|
|
<div class="modal fade" id="settingsModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title"><i class="bi bi-gear"></i> Settings</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h6>Contact Management</h6>
|
|
<hr>
|
|
<div class="mb-3">
|
|
<label for="inactiveHours" class="form-label">Remove contacts inactive for:</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="inactiveHours" value="48" min="1">
|
|
<span class="input-group-text">hours</span>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-danger" id="cleanupBtn">
|
|
<i class="bi bi-trash"></i> Clean Inactive Contacts
|
|
</button>
|
|
<hr>
|
|
<h6>Device Information</h6>
|
|
<div id="deviceInfo" class="small text-muted">
|
|
Loading...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast container for notifications -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="notificationToast" class="toast" role="alert">
|
|
<div class="toast-header">
|
|
<strong class="me-auto">mc-webui</strong>
|
|
<button type="button" class="btn-close" data-bs-dismiss="toast"></button>
|
|
</div>
|
|
<div class="toast-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap 5 JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
|
|
|
{% block extra_scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|