Revert "fix(calendar): stack layout, cap block at 1000px, restore events scroll"
Deploy / verify (push) Successful in 51s
Deploy / deploy (push) Successful in 51s

This reverts commit bf6ca475db.
This commit is contained in:
Peter Meier
2026-05-08 08:18:05 +02:00
parent bf6ca475db
commit b491e3767a
+9 -12
View File
@@ -397,7 +397,7 @@
</script>
<div
class="{layoutClasses} w-full max-w-[1000px] mx-auto min-w-0 calendar-block border border-stein-200 overflow-hidden"
class="{layoutClasses} w-full min-w-0 calendar-block border border-stein-200 overflow-hidden"
data-block="Calendar" data-block-type="calendar"
data-block-slug={block._slug}
>
@@ -597,10 +597,9 @@
</div>
{/if}
<div class="calendar-grid-wrapper flex w-full flex-col">
<div class="calendar-grid-wrapper grid w-full grid-cols-1 md:grid-cols-2 gap-0">
<!-- Links: Kalender -->
<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="calendar-column min-h-full p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm">
<div class="flex items-center justify-between gap-2 mb-4">
<button
type="button"
@@ -676,16 +675,15 @@
{/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 flex flex-col" bind:this={panelEl}>
<div class="calendar-events-wrapper min-h-0 flex flex-col" bind:this={panelEl}>
<div
class="calendar-events-panel border-t border-stein-200 bg-stein-0 flex flex-col"
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"
>
{#if items.length === 0}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
@@ -707,7 +705,7 @@
{t(T.calendar_clear_filter)}
</button>
</div>
<ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto">
{#each selectedDayEvents as item}
{@render eventAccordion(item, true, false)}
{/each}
@@ -721,7 +719,7 @@
{t(T.calendar_event_count, { n: futureEvents.length })}
</span>
</div>
<ul class="m-0! p-0! list-none max-h-[600px] overflow-auto">
<ul class="m-0! p-0! list-none flex-1 min-h-0 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">
@@ -759,7 +757,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 opacity-80">
<ul class="m-0! p-0! list-none flex-1 min-h-0 overflow-auto opacity-80">
{#each pastEvents as item}
{@render eventAccordion(item, false, false)}
{/each}
@@ -845,8 +843,7 @@
.calendar-block .day-group {
break-inside: avoid;
}
.calendar-block .calendar-events-panel,
.calendar-block .calendar-events-panel ul {
.calendar-block .calendar-events-panel {
overflow: visible !important;
max-height: none !important;
}