From a0e2015eebdefc196e70955f2bb0284451798e36 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Mon, 22 Jun 2026 23:11:10 +0200
Subject: [PATCH] fix(calendar): EventDateBox simpler flex-center Layout
 (Safari-fest)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Grid/calc/leading-Experimente raus. Schlichtes flex justify/items-center
mit innerem text-center-Block (Wochentag/Tag/Monat) — rendert auf iOS
Safari zuverlässig. wald-Farbschema + rounded-br-4xl + shadow.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/lib/components/blocks/EventDateBox.svelte | 110 +++++++++---------
 1 file changed, 52 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/blocks/EventDateBox.svelte b/src/lib/components/blocks/EventDateBox.svelte
index ed7d176..fd296c5 100644
--- a/src/lib/components/blocks/EventDateBox.svelte
+++ b/src/lib/components/blocks/EventDateBox.svelte
@@ -1,69 +1,63 @@
 <script lang="ts">
-  /**
-   * Datums-Kachel für Kalender-Einträge.
-   *
-   * - Einzeltermin: Wochentag · großer Tag · Monat
-   * - Mehrtägig:    Wochentag-Range · Tag-Range · Monat
-   *                 (gleiche Höhe, Box wächst nur in der Breite)
-   *
-   * Bewusst feste rem-Schriftgrößen + `size-*` (mobil etwas kleiner als
-   * Desktop). Keine fluid/calc-Skalierung → kein Overflow, identisch
-   * berechenbar auf allen Geräten.
-   */
-  let {
-    start,
-    end = null,
-    multiDay = false,
-  }: { start: Date; end?: Date | null; multiDay?: boolean } = $props();
+    /**
+     * Datums-Kachel für Kalender-Einträge.
+     *
+     * - Einzeltermin: Wochentag · großer Tag · Monat
+     * - Mehrtägig:    Wochentag-Range · Tag-Range · Monat
+     *                 (gleiche Höhe, Box wächst nur in der Breite)
+     *
+     * Bewusst feste rem-Schriftgrößen + `size-*` (mobil etwas kleiner als
+     * Desktop). Keine fluid/calc-Skalierung → kein Overflow, identisch
+     * berechenbar auf allen Geräten.
+     */
+    let {
+        start,
+        end = null,
+        multiDay = false,
+    }: { start: Date; end?: Date | null; multiDay?: boolean } = $props();
 
-  const isRange = $derived(multiDay && !!end);
+    const isRange = $derived(multiDay && !!end);
 
-  const weekday = (d: Date) =>
-    d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
-  const month = (d: Date) => d.toLocaleDateString("de-DE", { month: "short" });
+    const weekday = (d: Date) =>
+        d.toLocaleDateString("de-DE", { weekday: "short" }).replace(/\.$/, "");
+    const month = (d: Date) =>
+        d.toLocaleDateString("de-DE", { month: "short" });
 
-  // YYYY-MM-DD aus lokalen Feldern (kein UTC-Shift) für <time datetime>.
-  const isoDate = (d: Date) =>
-    `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+    // YYYY-MM-DD aus lokalen Feldern (kein UTC-Shift) für <time datetime>.
+    const isoDate = (d: Date) =>
+        `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
 
-  const fullDate = (d: Date) =>
-    d.toLocaleDateString("de-DE", {
-      weekday: "long",
-      day: "numeric",
-      month: "long",
-      year: "numeric",
-    });
+    const fullDate = (d: Date) =>
+        d.toLocaleDateString("de-DE", {
+            weekday: "long",
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+        });
 
-  const ariaLabel = $derived(
-    isRange && end ? `${fullDate(start)} bis ${fullDate(end)}` : fullDate(start),
-  );
+    const ariaLabel = $derived(
+        isRange && end
+            ? `${fullDate(start)} bis ${fullDate(end)}`
+            : fullDate(start),
+    );
 </script>
 
 <time
-  datetime={isoDate(start)}
-  aria-label={ariaLabel}
-  class="shrink-0 select-none flex flex-col items-center justify-center gap-0.5 leading-none tabular-nums rounded-sm bg-himmel-800 text-himmel-50
-    {isRange
-    ? 'h-16 sm:h-20 min-w-16 sm:min-w-20 px-2.5'
-    : 'size-16 sm:size-20'}"
+    datetime={isoDate(start)}
+    aria-label={ariaLabel}
+    class="shrink-0 select-none aspect-square size-20 rounded-sm rounded-br-4xl bg-wald-200 text-wald-500 flex justify-center items-center shadow"
 >
-  <span
-    class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300 whitespace-nowrap"
-  >
-    {#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(start)}{/if}
-  </span>
-
-  {#if isRange && end}
-    <span class="text-base sm:text-lg font-bold leading-none tracking-tight whitespace-nowrap">
-      {start.getDate()}–{end.getDate()}
-    </span>
-  {:else}
-    <span class="text-2xl sm:text-3xl font-bold leading-none">{start.getDate()}</span>
-  {/if}
-
-  <span
-    class="text-[10px] sm:text-[11px] font-medium uppercase tracking-wider text-himmel-300"
-  >
-    {month(start)}
-  </span>
+    <div class="text-center font-black leading-normal">
+        <div class="text-[10px] uppercase tracking-wider">
+            {#if isRange && end}{weekday(start)}–{weekday(end)}{:else}{weekday(
+                    start,
+                )}{/if}
+        </div>
+        <div class="text-[20px] leading-5">
+            {#if isRange && end}{start.getDate()}–{end.getDate()}{:else}{start.getDate()}{/if}
+        </div>
+        <div class="text-[10px] uppercase tracking-wider">
+            {month(start)}
+        </div>
+    </div>
 </time>