fix(calendar): EventDateBox simpler flex-center Layout (Safari-fest)

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>
2026-06-22 23:11:10 +02:00
parent d484a7d90b
commit a0e2015eeb
1 changed files with 52 additions and 58 deletions
@@ -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>