From 4a2f094a4046c52cc8785773028083e4928b6990 Mon Sep 17 00:00:00 2001
From: Scarriffle <guidoschmit@guidoschmit.com>
Date: Wed, 8 Apr 2026 15:08:45 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Ganzt=C3=A4gig-Zeile=20sticky=20+=20korr?=
 =?UTF-8?q?ekte=20Ausrichtung=20in=20Wochen-/Tagesansicht?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/css/app.css      | 21 ++++++++++++---------
 frontend/js/views/week.js | 16 +++++++++-------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/frontend/css/app.css b/frontend/css/app.css
index d5e12aa..ee53534 100644
--- a/frontend/css/app.css
+++ b/frontend/css/app.css
@@ -373,8 +373,8 @@ a { color: var(--primary); text-decoration: none; }
   background: var(--bg-sidebar);
 }
 .sidebar-copyright:hover { color: var(--text-1); }
-.main-view { flex: 1; overflow: auto; display: flex; flex-direction: column; }
-#view-container { flex: 1; display: flex; flex-direction: column; }
+.main-view { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
+#view-container { flex: 1; display: flex; flex-direction: column; min-height: 0; }
 
 /* ── Mini Calendar ──────────────────────────────────────── */
 .mini-cal { padding: 12px 16px; }
@@ -452,7 +452,7 @@ a { color: var(--primary); text-decoration: none; }
 .cal-item:hover .cal-item-remove { opacity: 1; }
 
 /* ── Month View ─────────────────────────────────────────── */
-.month-view { display: flex; flex-direction: column; height: 100%; }
+.month-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
 .month-header {
   display: grid; grid-template-columns: 38px repeat(7, 1fr);
   border-bottom: 1px solid var(--border); flex-shrink: 0;
@@ -509,11 +509,13 @@ a { color: var(--primary); text-decoration: none; }
 .month-more:hover { color: var(--primary); }
 
 /* ── Week / Day Views ───────────────────────────────────── */
-.week-view, .day-view { display: flex; flex-direction: column; height: 100%; }
+.week-view, .day-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
+.week-head-sticky {
+  flex-shrink: 0; position: sticky; top: 0; z-index: 10;
+  background: var(--bg-app);
+}
 .week-header-row {
   display: flex; border-bottom: 1px solid var(--border);
-  flex-shrink: 0; background: var(--bg-app);
-  position: sticky; top: 0; z-index: 10;
 }
 /* KW badge in week view header gutter */
 .week-kw-badge {
@@ -571,7 +573,7 @@ a { color: var(--primary); text-decoration: none; }
 .col-span-tint { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
 
 /* Time grid */
-.week-body { display: flex; flex: 1; overflow-y: auto; position: relative; }
+.week-body { display: flex; flex: 1; overflow-y: auto; position: relative; min-height: 0; }
 .week-time-col { width: 56px; flex-shrink: 0; position: relative; }
 .time-label {
   height: var(--hour-h, 60px); display: flex; align-items: flex-start; justify-content: flex-end;
@@ -631,7 +633,8 @@ a { color: var(--primary); text-decoration: none; }
   display: flex;
   gap: 16px;
   padding: 16px;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   box-sizing: border-box;
   overflow-y: auto;
 }
@@ -719,7 +722,7 @@ a { color: var(--primary); text-decoration: none; }
 }
 
 /* ── Agenda View ────────────────────────────────────────── */
-.agenda-view { padding: 16px; }
+.agenda-view { padding: 16px; flex: 1; overflow-y: auto; min-height: 0; }
 .agenda-day { margin-bottom: 16px; }
 .agenda-date {
   font-size: 13px; font-weight: 600; color: var(--text-2);
diff --git a/frontend/js/views/week.js b/frontend/js/views/week.js
index 8923671..212574a 100644
--- a/frontend/js/views/week.js
+++ b/frontend/js/views/week.js
@@ -137,13 +137,15 @@ export function renderWeek(container, currentDate, events, onSlotClick, onEventC
   const viewClass = isSingleDay ? 'day-view' : 'week-view';
 
   container.innerHTML = `<div class="${viewClass}">
-    <div class="week-header-row">
-      <div class="week-time-gutter">${kwBadge}</div>
-      ${headerCols}
-    </div>
-    <div class="week-allday-row">
-      <div class="allday-gutter">${t('allday')}</div>
-      <div class="allday-cols">${alldayCols}</div>
+    <div class="week-head-sticky">
+      <div class="week-header-row">
+        <div class="week-time-gutter">${kwBadge}</div>
+        ${headerCols}
+      </div>
+      <div class="week-allday-row">
+        <div class="allday-gutter">${t('allday')}</div>
+        ${alldayCols}
+      </div>
     </div>
     <div class="week-body">
       <div class="week-time-col">${timeLabels}</div>