From da57ad1ac8d853f70eb5afcd1d94d0e35b8594e0 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sun, 19 Apr 2026 12:42:37 +0200
Subject: [PATCH] fix: update styling and structure in various components

- Changed margin class from `my-6` to `mb-6` in ContentRows.svelte for consistent spacing.
- Updated PostCard.svelte to use `$derived` for post properties, enhancing reactivity.
- Refined DeadlineBannerBlock.svelte by removing unnecessary border classes and improving layout for better content alignment.
- Modified Button.svelte to support rendering children directly, enhancing flexibility.
- Added `tabindex="0"` to TabBar.svelte for improved accessibility.
- Fixed textarea closing tag in Textarea.svelte for proper HTML structure.
- Corrected span closing tag in Toggle.svelte for valid markup.
---
 src/lib/components/ContentRows.svelte         |  2 +-
 src/lib/components/PostCard.svelte            |  2 +-
 .../blocks/DeadlineBannerBlock.svelte         | 64 +++++++++++--------
 src/lib/ui/Button.svelte                      |  5 +-
 src/lib/ui/TabBar.svelte                      |  1 +
 src/lib/ui/Textarea.svelte                    |  2 +-
 src/lib/ui/Toggle.svelte                      |  2 +-
 7 files changed, 47 insertions(+), 31 deletions(-)

diff --git a/src/lib/components/ContentRows.svelte b/src/lib/components/ContentRows.svelte
index b2487ee..f01333f 100644
--- a/src/lib/components/ContentRows.svelte
+++ b/src/lib/components/ContentRows.svelte
@@ -89,7 +89,7 @@
   ]);
 </script>
 
-<div class="content my-6 {className}">
+<div class="content mb-6 {className}">
   {#each rows as row}
     {#if row.content.length > 0}
       <div
diff --git a/src/lib/components/PostCard.svelte b/src/lib/components/PostCard.svelte
index 5cbb84f..dc2f845 100644
--- a/src/lib/components/PostCard.svelte
+++ b/src/lib/components/PostCard.svelte
@@ -29,7 +29,7 @@
     eventDate?: string;
     eventLocation?: { text?: string };
   };
-  const p = post as PostWithEvent;
+  const p = $derived(post as PostWithEvent);
 
   const eventDate = $derived(p.isEvent && p.eventDate ? p.eventDate : null);
   const locationText = $derived(p.eventLocation?.text ?? null);
diff --git a/src/lib/components/blocks/DeadlineBannerBlock.svelte b/src/lib/components/blocks/DeadlineBannerBlock.svelte
index 6a852bf..7bc4eea 100644
--- a/src/lib/components/blocks/DeadlineBannerBlock.svelte
+++ b/src/lib/components/blocks/DeadlineBannerBlock.svelte
@@ -84,10 +84,10 @@
 
   const variantClasses = $derived(
     variant === "urgent"
-      ? "bg-amber-100 text-amber-900 border-amber-300"
+      ? "bg-amber-100 text-amber-900"
       : variant === "info"
-        ? "bg-sky-100 text-sky-900 border-sky-300"
-        : "bg-wald-100 text-wald-900 border-wald-300",
+        ? "bg-sky-100 text-sky-900"
+        : "bg-wald-100 text-wald-900",
   );
   const iconName = $derived(
     variant === "urgent" ? "mdi:alert-circle" : "mdi:calendar-clock",
@@ -101,35 +101,47 @@
     data-block-type="deadline_banner"
     data-block-slug={block._slug}
   >
-    <div class="border-y {variantClasses}">
-      <div class="container-custom flex flex-wrap items-center justify-start gap-x-3 gap-y-1 px-4 py-2 text-sm sm:text-base">
-        <Icon icon={iconName} class="size-5 shrink-0" aria-hidden="true" />
-        {#if block.label}
-          <span class="font-semibold">{block.label}:</span>
-        {/if}
+    {#snippet inner()}
+      <div class="container-custom flex flex-wrap sm:flex-nowrap items-center gap-x-2 gap-y-1 px-4 py-1.5 text-xs sm:text-sm">
         {#if dateStr}
-          <span class="font-medium">{dateStr}</span>
+          <span class="inline-flex items-center gap-1.5 rounded-md bg-white/70 px-2 py-0.5 text-sm sm:text-base font-bold whitespace-nowrap shrink-0">
+            <Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
+            {dateStr}
+            {#if countdownStr}
+              <span class="ml-1 rounded-full bg-black/80 text-white px-1.5 py-0 text-[0.6rem] font-bold uppercase tracking-wide">
+                {countdownStr}
+              </span>
+            {/if}
+          </span>
+        {:else}
+          <Icon icon={iconName} class="size-4 shrink-0" aria-hidden="true" />
+          {#if countdownStr}
+            <span class="rounded-full bg-white/60 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide whitespace-nowrap shrink-0">
+              {countdownStr}
+            </span>
+          {/if}
         {/if}
         {#if text}
-          <span>{dateStr ? "·" : ""} {text}</span>
-        {/if}
-        {#if countdownStr}
-          <span class="rounded-full bg-white/60 px-2 py-0.5 text-xs font-semibold uppercase tracking-wide">
-            {countdownStr}
-          </span>
+          <span class="min-w-0 wrap-break-word line-clamp-2 sm:line-clamp-1">{text}</span>
         {/if}
         {#if href}
-          <a
-            href={href}
-            target={newTab ? "_blank" : undefined}
-            rel={newTab ? "noopener noreferrer" : undefined}
-            class="inline-flex items-center gap-1 underline-offset-2 hover:underline"
-          >
-            Mehr
-            <Icon icon="mdi:arrow-right" class="size-4" aria-hidden="true" />
-          </a>
+          <Icon icon="mdi:arrow-right" class="size-4 shrink-0 ml-auto" aria-hidden="true" />
         {/if}
       </div>
-    </div>
+    {/snippet}
+    {#if href}
+      <a
+        href={href}
+        target={newTab ? "_blank" : undefined}
+        rel={newTab ? "noopener noreferrer" : undefined}
+        class="block no-underline text-inherit hover:no-underline transition-all hover:brightness-95 {variantClasses}"
+      >
+        {@render inner()}
+      </a>
+    {:else}
+      <div class="{variantClasses}">
+        {@render inner()}
+      </div>
+    {/if}
   </div>
 {/if}
diff --git a/src/lib/ui/Button.svelte b/src/lib/ui/Button.svelte
index 3fec64d..f47a4f5 100644
--- a/src/lib/ui/Button.svelte
+++ b/src/lib/ui/Button.svelte
@@ -9,6 +9,7 @@
     loading = false,
     type = 'button' as 'button' | 'submit' | 'reset',
     label = '',
+    children,
   } = $props();
 
   const base =
@@ -40,7 +41,9 @@
   {#if loading}
     <span class="inline-block h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent"></span>
     <span>Laden...</span>
+  {:else if children}
+    {@render children()}
   {:else}
-    <slot>{label}</slot>
+    {label}
   {/if}
 </button>
diff --git a/src/lib/ui/TabBar.svelte b/src/lib/ui/TabBar.svelte
index 91b4204..1e0cc0e 100644
--- a/src/lib/ui/TabBar.svelte
+++ b/src/lib/ui/TabBar.svelte
@@ -30,6 +30,7 @@
   role="tablist"
   aria-label={labelledBy || 'Tabs'}
   class="flex h-12 border-b border-stein-200"
+  tabindex="0"
   onkeydown={handleKeydown}
 >
   {#each tabs as tab}
diff --git a/src/lib/ui/Textarea.svelte b/src/lib/ui/Textarea.svelte
index 9928b6a..5da98fa 100644
--- a/src/lib/ui/Textarea.svelte
+++ b/src/lib/ui/Textarea.svelte
@@ -44,7 +44,7 @@
     class="min-h-[120px] w-full resize-y rounded-lg border bg-white px-4 py-3 text-base text-stein-800 outline-none placeholder:text-stein-400 {error || invalid
       ? 'border-error ring-2 ring-error-subtle'
       : 'border-stein-300 hover:border-stein-400 focus:border-wald-500 focus:ring-2 focus:ring-wald-100'} disabled:bg-stein-100 disabled:opacity-60"
-  />
+  ></textarea>
   {#if error}
     <p id={errorId} class="mt-1.5 text-[0.8125rem] text-error" role="alert">
       {error}
diff --git a/src/lib/ui/Toggle.svelte b/src/lib/ui/Toggle.svelte
index 20cda52..d345af7 100644
--- a/src/lib/ui/Toggle.svelte
+++ b/src/lib/ui/Toggle.svelte
@@ -21,7 +21,7 @@
     />
     <span
       class="absolute top-0.5 inline-block h-5 w-5 rounded-full bg-white shadow-sm transition-transform duration-200 {checked ? 'left-[22px] translate-x-0.5' : 'left-0.5'}"
-    />
+    ></span>
   </span>
   {#if label}
     <span class="text-base text-stein-700">{label}</span>