fix(pwa): Layout berücksichtigt iOS-Safe-Area auch im Hauptbereich

Bisher bekam nur .topbar Safe-Area-Padding, aber .content-wrapper rechnete weiter starr mit --topbar-h. Im PWA-Standalone-Modus auf iPhones mit Notch lief der Kalender dadurch oben in die Status-Bar und unten in den Home-Indicator hinein — die Wochentag-Header und Tagesnummern der ersten Zeile waren verdeckt, die letzte Zeile zu kurz. - .content-wrapper: margin-top und height berechnen jetzt safe-top und safe-bottom mit ein - .sidebar (Mobile-Overlay): top startet ebenfalls unterhalb der vergrösserten Topbar Version v10 → v11.
2026-05-07 20:01:48 +02:00
parent ebe250ca01
commit 6503d18637
4 changed files with 26 additions and 13 deletions
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -1534,7 +1534,20 @@ a { color: var(--primary); text-decoration: none; }

 /* iOS notch / home-indicator safe areas (PWA standalone) */
@supports (padding: env(safe-area-inset-top)) {
-  .topbar { padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
+  .topbar {
+    padding-top: env(safe-area-inset-top);
+    height: calc(var(--topbar-h) + env(safe-area-inset-top));
+  }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
+  /* The main content sits below the (now taller) topbar and must not
+     extend behind the home indicator at the bottom. */
+  .content-wrapper {
+    margin-top: calc(var(--topbar-h) + env(safe-area-inset-top));
+    height: calc(100vh - var(--topbar-h) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
+  }
+  /* On mobile the slide-in sidebar also needs to start below the larger topbar */
+  @media (max-width: 768px) {
+    .sidebar { top: calc(var(--topbar-h) + env(safe-area-inset-top)); }
+  }
 }

--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,7 @@
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <!-- APP_VERSION: update here + version.js on every release -->
-  <title>Calendarr v10</title>
+  <title>Calendarr v11</title>
  <link rel="icon" type="image/svg+xml" href="/static/favicon.svg" />
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#4285f4" />
@@ -80,7 +80,7 @@
      <button type="submit" class="btn btn-primary btn-full">Anmelden</button>
    </form>
  </div>
-  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v10</button>
+  <button class="impressum-link" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v11</button>
 </div>

 <!-- ─── MAIN APP ──────────────────────────────────────────── -->
@@ -185,7 +185,7 @@
            <span data-i18n="my_calendars">Meine Kalender</span>
            <div class="add-cal-dropdown-wrap">
              <button class="icon-btn mini-btn" id="btn-add-cal" title="Kalender hinzufügen">
-                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v10h-2v-6H5v-2h6V5h2v10h6v2z"/></svg>
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 13h-6v11h-2v-6H5v-2h6V5h2v11h6v2z"/></svg>
              </button>
              <div class="add-cal-dropdown hidden" id="add-cal-dropdown">
                <button data-action="local">Lokaler Kalender</button>
@@ -199,7 +199,7 @@
          <div id="cal-list-items"></div>
        </div>
      </div>
-      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v10</button>
+      <button class="sidebar-copyright" onclick="openImpressum()">©&nbsp;2026&nbsp;Scarriffleservices&nbsp;·&nbsp;v11</button>
    </aside>
    <div id="sidebar-backdrop" class="sidebar-backdrop"></div>

@@ -235,7 +235,7 @@
          <input type="hidden" id="ev-start" />
          <div class="dt-display" id="ev-start-display" tabindex="0" role="button">
            <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v10H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
          </div>
        </div>
        <div class="form-group half">
@@ -243,7 +243,7 @@
          <input type="hidden" id="ev-end" />
          <div class="dt-display" id="ev-end-display" tabindex="0" role="button">
            <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v10H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
          </div>
        </div>
      </div>
@@ -253,7 +253,7 @@
          <input type="hidden" id="ev-start-date" />
          <div class="dt-display" id="ev-start-date-display" tabindex="0" role="button">
            <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v10H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
          </div>
        </div>
        <div class="form-group half">
@@ -261,7 +261,7 @@
          <input type="hidden" id="ev-end-date" />
          <div class="dt-display" id="ev-end-date-display" tabindex="0" role="button">
            <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v10H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
          </div>
        </div>
      </div>
@@ -311,7 +311,7 @@
          <input type="hidden" id="ev-rec-until" />
          <div class="dt-display" id="ev-rec-until-display" tabindex="0" role="button">
            <span class="dt-display-text">—</span>
-            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v10H7z"/></svg>
+            <svg class="dt-display-icon" viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v24a2 2 0 002 2h14a2 2 0 002-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v21zM7 10h5v11H7z"/></svg>
          </div>
        </div>
      </div>
@@ -870,7 +870,7 @@
      <a href="mailto:scarriffleservices@gmail.com">scarriffleservices@gmail.com</a></p>
    </div>
    <div class="modal-footer" style="justify-content:space-between;align-items:center">
-      <span style="font-size:12px;color:var(--text-3)">Calendarr v10</span>
+      <span style="font-size:12px;color:var(--text-3)">Calendarr v11</span>
      <button class="btn btn-ghost" onclick="closeImpressum()">Schliessen</button>
    </div>
  </div>
--- a/frontend/js/version.js
+++ b/frontend/js/version.js
@@ -1,2 +1,2 @@
 // Increment APP_VERSION with every code change
-export const APP_VERSION = 'v10';
+export const APP_VERSION = 'v11';
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,7 +1,7 @@
 // Calendarr Service Worker
 // Cache-first for static assets, network-first for /api/* (graceful offline)

-const CACHE_VERSION = 'calendarr-v10';
+const CACHE_VERSION = 'calendarr-v11';
 const STATIC_ASSETS = [
  '/',
  '/index.html',