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

@@ -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

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);

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}