From bf6ca475dbe22417060f96465c9002bdd8867da6 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Fri, 8 May 2026 08:16:57 +0200
Subject: [PATCH] fix(calendar): stack layout, cap block at 1000px, restore
 events scroll

The 2-col grid forced the events list to share the calendar's square
height which cropped event details. Stack calendar over events instead,
cap the whole block at 1000px (centered), constrain the calendar grid to
480px so day cells don't grow oversized, and re-add a 600px max-height
with internal scroll on the events list so the page stays compact and
sticky day-group headers regain their scroll context.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../components/blocks/CalendarBlock.svelte    | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index ec6a5d8..1823f81 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -397,7 +397,7 @@
 </script>
 
 <div
-  class="{layoutClasses} w-full min-w-0 calendar-block border border-stein-200 overflow-hidden"
+  class="{layoutClasses} w-full max-w-[1000px] mx-auto min-w-0 calendar-block border border-stein-200 overflow-hidden"
   data-block="Calendar" data-block-type="calendar"
   data-block-slug={block._slug}
 >
@@ -597,9 +597,10 @@
     </div>
   {/if}
 
-  <div class="calendar-grid-wrapper grid w-full grid-cols-1 md:grid-cols-2 gap-0">
+  <div class="calendar-grid-wrapper flex w-full flex-col">
     <!-- Links: Kalender -->
-    <div class="calendar-column min-h-full p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
+    <div class="calendar-column p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
+     <div class="w-full max-w-[480px] mx-auto">
       <div class="flex items-center justify-between gap-2 mb-4">
         <button
           type="button"
@@ -675,15 +676,16 @@
           {/if}
         {/each}
       </div>
+     </div>
     </div>
 
     <!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline
          im summary, Beschreibung + Aktionen im body. Kalender-Klick
          filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute,
          gruppiert nach Tag mit großzügigem header. -->
-    <div class="calendar-events-wrapper min-h-0 flex flex-col" bind:this={panelEl}>
+    <div class="calendar-events-wrapper flex flex-col" bind:this={panelEl}>
       <div
-        class="calendar-events-panel border-t md:border-t-0 md:border-l border-stein-200 bg-stein-0 flex flex-col overflow-hidden flex-1 min-h-0"
+        class="calendar-events-panel border-t border-stein-200 bg-stein-0 flex flex-col"
       >
       {#if items.length === 0}
         <p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
@@ -705,7 +707,7 @@
             {t(T.calendar_clear_filter)}
           </button>
         </div>
-        <ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
+        <ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
           {#each selectedDayEvents as item}
             {@render eventAccordion(item, true, false)}
           {/each}
@@ -719,7 +721,7 @@
             {t(T.calendar_event_count, { n: futureEvents.length })}
           </span>
         </div>
-        <ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
+        <ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
           {#each futureEventsByDay as group, gIdx}
             <li class="day-group">
               <div class="px-3 py-1 bg-himmel-50/60 text-[11px] uppercase tracking-wide font-medium text-stein-600 sticky top-0 z-10 backdrop-blur-sm">
@@ -757,7 +759,7 @@
             <span class="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
             <span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
           </summary>
-          <ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto opacity-80">
+          <ul class="m-0! p-0! list-none opacity-80">
             {#each pastEvents as item}
               {@render eventAccordion(item, false, false)}
             {/each}
@@ -843,7 +845,8 @@
     .calendar-block .day-group {
       break-inside: avoid;
     }
-    .calendar-block .calendar-events-panel {
+    .calendar-block .calendar-events-panel,
+    .calendar-block .calendar-events-panel ul {
       overflow: visible !important;
       max-height: none !important;
     }