rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Sidebar/Backdrop aus #app raus, direkt in <body>

Browse source 
#sidebar und #sidebar-backdrop waren Kinder von #app (display:flex),
was auf iOS Safari Stacking-Context-Probleme verursacht. Beide Elemente
sind jetzt direkte Kinder von <body>. _openSidebar() zurueck zur
sauberen .open-Klassen-Methode. will-change:transform entfernt.
SW by-v32 -> by-v33.
This commit is contained in:
rene 2026-04-14 17:44:46 +02:00
parent 3b79efb82b
commit d399cb84cf
4 changed files with 21 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

37
backend/static/index.html
View file

@ -27,26 +27,10 @@
</head>
<body>
<!-- ============================================================
APP SHELL
============================================================ -->
<div id="app">
<!-- Backdrop + Sidebar direkt im body (kein Ancestor-Stacking-Context) -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
<!-- MOBILE HEADER (wird per JS mit Seitentitel befüllt) -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<div id="header-dog-switcher" class="dog-switcher">
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
</header>
<!-- Backdrop für mobile Sidebar-Drawer -->
<div id="sidebar-backdrop" class="sidebar-backdrop"></div>
<!-- DESKTOP SIDEBAR -->
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
<div class="sidebar-logo" id="sidebar-dog-switcher">
<img class="sidebar-logo-img" src="/icons/icon-180.png" alt="Ban Yaro">
<span class="sidebar-logo-text">Ban Yaro</span>
@ -111,6 +95,21 @@
</div>
</nav>
<!-- ============================================================
APP SHELL
============================================================ -->
<div id="app">
<!-- MOBILE HEADER -->
<header id="app-header">
<button class="header-back hidden" id="header-back" aria-label="Zurück">&#8592;</button>
<div id="header-dog-switcher" class="dog-switcher">
<span class="header-title" id="header-title">Ban Yaro</span>
</div>
<div id="header-actions"></div>
<button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
</header>
<!-- HAUPT-INHALTSBEREICH -->
<main id="page-content" role="main">