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> </script>
<div <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="Calendar" data-block-type="calendar"
data-block-slug={block._slug} data-block-slug={block._slug}
> >
@@ -597,10 +597,9 @@
</div> </div>
{/if} {/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 --> <!-- Links: Kalender -->
<div class="calendar-column p-4 flex flex-col bg-himmel-800 text-himmel-100 shadow-sm"> <div class="calendar-column min-h-full 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"> <div class="flex items-center justify-between gap-2 mb-4">
<button <button
type="button" type="button"
@@ -677,15 +676,14 @@
{/each} {/each}
</div> </div>
</div> </div>
</div>
<!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline <!-- Rechts: alle zukünftigen Termine als Accordion. Datum + Headline
im summary, Beschreibung + Aktionen im body. Kalender-Klick im summary, Beschreibung + Aktionen im body. Kalender-Klick
filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute, filtert auf einen Tag; ohne Filter zeigt Liste alles ab heute,
gruppiert nach Tag mit großzügigem header. --> 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 <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} {#if items.length === 0}
<p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p> <p class="text-sm text-stein-500 p-4">{t(T.calendar_no_events)}</p>
@@ -707,7 +705,7 @@
{t(T.calendar_clear_filter)} {t(T.calendar_clear_filter)}
</button> </button>
</div> </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} {#each selectedDayEvents as item}
{@render eventAccordion(item, true, false)} {@render eventAccordion(item, true, false)}
{/each} {/each}
@@ -721,7 +719,7 @@
{t(T.calendar_event_count, { n: futureEvents.length })} {t(T.calendar_event_count, { n: futureEvents.length })}
</span> </span>
</div> </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} {#each futureEventsByDay as group, gIdx}
<li class="day-group"> <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"> <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="font-medium uppercase tracking-wide">{t(T.calendar_past_events)}</span>
<span class="text-stein-500 tabular-nums">· {pastEvents.length}</span> <span class="text-stein-500 tabular-nums">· {pastEvents.length}</span>
</summary> </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} {#each pastEvents as item}
{@render eventAccordion(item, false, false)} {@render eventAccordion(item, false, false)}
{/each} {/each}
@@ -845,8 +843,7 @@
.calendar-block .day-group { .calendar-block .day-group {
break-inside: avoid; break-inside: avoid;
} }
.calendar-block .calendar-events-panel, .calendar-block .calendar-events-panel {
.calendar-block .calendar-events-panel ul {
overflow: visible !important; overflow: visible !important;
max-height: none !important; max-height: none !important;
} }