Fix: App-Frame bei großer Systemschrift (min-height statt height, Grid responsiv)

This commit is contained in:
rene 2026-04-19 09:48:44 +02:00
parent e784832a87
commit 08ec40228a
4 changed files with 11 additions and 8 deletions

View file

@ -18,7 +18,7 @@
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom)); padding-bottom: calc(var(--nav-bottom-height) + var(--safe-bottom) + 16px);
} }
/* Desktop: Sidebar-Layout */ /* Desktop: Sidebar-Layout */
@ -39,8 +39,9 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
height: calc(var(--header-height) + var(--safe-top)); min-height: calc(var(--header-height) + var(--safe-top));
padding-top: var(--safe-top); padding-top: var(--safe-top);
padding-bottom: var(--space-2);
background: var(--c-surface); background: var(--c-surface);
border-bottom: 1px solid var(--c-border-light); border-bottom: 1px solid var(--c-border-light);
display: flex; display: flex;
@ -164,8 +165,9 @@
left: 0; left: 0;
right: 0; right: 0;
z-index: 300; z-index: 300;
height: calc(var(--nav-bottom-height) + var(--safe-bottom)); min-height: calc(var(--nav-bottom-height) + var(--safe-bottom));
padding-bottom: var(--safe-bottom); padding-top: var(--space-1);
padding-bottom: calc(var(--safe-bottom) + var(--space-1));
background: var(--c-surface); background: var(--c-surface);
border-top: 1px solid var(--c-border-light); border-top: 1px solid var(--c-border-light);
display: flex; display: flex;
@ -236,9 +238,10 @@
} }
.nav-item-label { .nav-item-label {
font-size: 9px; font-size: clamp(9px, 0.6rem, 11px);
font-weight: var(--weight-semibold); font-weight: var(--weight-semibold);
line-height: 1; line-height: 1;
white-space: nowrap;
} }
/* Mittlerer + Button: kein Label, größer */ /* Mittlerer + Button: kein Label, größer */

View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung. Router, State-Management, Navigation, Initialisierung.
============================================================ */ ============================================================ */
const APP_VER = '203'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen const APP_VER = '204'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => { const App = (() => {

View file

@ -73,7 +73,7 @@ window.Page_welcome = (() => {
letter-spacing:0.05em;border-bottom:1px solid var(--c-border)"> letter-spacing:0.05em;border-bottom:1px solid var(--c-border)">
Was Ban Yaro kann Was Ban Yaro kann
</div> </div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:0"> <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0">
${[ ${[
['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten'], ['book-open', 'Tagebuch', 'Momente, Fotos und Meilensteine festhalten'],
['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente'], ['syringe', 'Gesundheit', 'Impfungen, Tierarztbesuche & Medikamente'],

View file

@ -3,7 +3,7 @@
Offline-Cache + Push Notifications + Tile-Cache Offline-Cache + Push Notifications + Tile-Cache
============================================================ */ ============================================================ */
const CACHE_VERSION = 'by-v226'; const CACHE_VERSION = 'by-v227';
const CACHE_STATIC = `${CACHE_VERSION}-static`; const CACHE_STATIC = `${CACHE_VERSION}-static`;
const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten const CACHE_TILES = 'ban-yaro-tiles-v1'; // bleibt über SW-Updates erhalten