From 21b555b61d7a7402e5086262ac114ef4a9cd0c08 Mon Sep 17 00:00:00 2001
From: Peter Meier <peter.meier.1986@gmail.com>
Date: Sun, 7 Jun 2026 13:23:41 +0200
Subject: [PATCH] fix: Calendar-Toolbar bricht Mobile-Wrap-Layout pro Gruppe
 sauber um

Label und Buttons jeder Gruppe (Kalender / Teilen / Anzeigen) in
eigene inline-flex-Container gekapselt. Umbruch passiert nur zwischen
Gruppen, Labels werden nicht mehr von ihren Buttons getrennt.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/blocks/CalendarBlock.svelte    | 136 +++++++++---------
 1 file changed, 72 insertions(+), 64 deletions(-)

diff --git a/src/lib/components/blocks/CalendarBlock.svelte b/src/lib/components/blocks/CalendarBlock.svelte
index 3a21952..49dc44f 100644
--- a/src/lib/components/blocks/CalendarBlock.svelte
+++ b/src/lib/components/blocks/CalendarBlock.svelte
@@ -821,82 +821,90 @@
                             </div>
                         {/if}
 
-                        <!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren -->
-                        <div class="flex flex-wrap items-center gap-1 rounded-md border border-stein-200 bg-stein-50 p-1">
-                            <!-- Kalender-Aktionen -->
-                            <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
-                            <button
-                                type="button"
-                                onclick={() => downloadICS(toICS(item), fileSlug(title))}
-                                class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
-                                title={t(T.calendar_download_ics)}
-                                aria-label={t(T.calendar_download_ics)}
-                            >
-                                <Icon icon="mdi:download" class="size-3.5" />
-                                ICS
-                            </button>
-                            <a
-                                href={googleCalUrl(toICS(item))}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
-                                title={t(T.calendar_add_to_google)}
-                            >
-                                <Icon icon="mdi:google" class="size-3.5" />
-                                Google
-                            </a>
+                        <!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren.
+                             Auf Mobile bleiben Label+Buttons pro Gruppe via inline-flex zusammen,
+                             umgebrochen wird nur zwischen Gruppen. -->
+                        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 rounded-md border border-stein-200 bg-stein-50 p-1">
+                            <!-- Gruppe: Kalender -->
+                            <div class="inline-flex items-center gap-1">
+                                <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
+                                <button
+                                    type="button"
+                                    onclick={() => downloadICS(toICS(item), fileSlug(title))}
+                                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
+                                    title={t(T.calendar_download_ics)}
+                                    aria-label={t(T.calendar_download_ics)}
+                                >
+                                    <Icon icon="mdi:download" class="size-3.5" />
+                                    ICS
+                                </button>
+                                <a
+                                    href={googleCalUrl(toICS(item))}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 no-underline hover:bg-white"
+                                    title={t(T.calendar_add_to_google)}
+                                >
+                                    <Icon icon="mdi:google" class="size-3.5" />
+                                    Google
+                                </a>
+                            </div>
 
                             {#if feedHost}
                                 {@const shareKey = item._slug ?? String(item.start.getTime())}
                                 {@const copied = copyToastKey === shareKey}
                                 {@const shared = shareToastKey === shareKey}
-                                <span class="mx-1 h-4 w-px bg-stein-300" aria-hidden="true"></span>
-                                <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
-                                <button
-                                    type="button"
-                                    onclick={() => copyEventLink(item)}
-                                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
-                                    title={t(T.post_action_copy)}
-                                    aria-label={t(T.post_action_copy)}
-                                >
-                                    <Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
-                                    {copied ? t(T.post_action_copied) : "Link"}
-                                </button>
-                                <button
-                                    type="button"
-                                    onclick={() => shareEvent(item, title, locText)}
-                                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
-                                    title={t(T.calendar_share_aria)}
-                                    aria-label={t(T.calendar_share_aria)}
-                                >
-                                    <Icon icon={shared ? "mdi:check" : "mdi:share-variant"} class="size-3.5" />
-                                    {shared ? t(T.calendar_share_copied) : t(T.calendar_share)}
-                                </button>
-                                {#if item._slug}
+                                <!-- Gruppe: Teilen -->
+                                <div class="inline-flex items-center gap-1 border-l border-stein-300 pl-2">
+                                    <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
                                     <button
                                         type="button"
-                                        onclick={() => openSocial(item)}
+                                        onclick={() => copyEventLink(item)}
                                         class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
-                                        title="Social-Bild Vorschau"
-                                        aria-label="Social-Bild Vorschau"
+                                        title={t(T.post_action_copy)}
+                                        aria-label={t(T.post_action_copy)}
                                     >
-                                        <Icon icon="mdi:image-outline" class="size-3.5" />
-                                        Bild
+                                        <Icon icon={copied ? "mdi:check" : "mdi:link-variant"} class="size-3.5" />
+                                        {copied ? t(T.post_action_copied) : "Link"}
                                     </button>
-                                {/if}
+                                    <button
+                                        type="button"
+                                        onclick={() => shareEvent(item, title, locText)}
+                                        class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
+                                        title={t(T.calendar_share_aria)}
+                                        aria-label={t(T.calendar_share_aria)}
+                                    >
+                                        <Icon icon={shared ? "mdi:check" : "mdi:share-variant"} class="size-3.5" />
+                                        {shared ? t(T.calendar_share_copied) : t(T.calendar_share)}
+                                    </button>
+                                    {#if item._slug}
+                                        <button
+                                            type="button"
+                                            onclick={() => openSocial(item)}
+                                            class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-700 hover:bg-white"
+                                            title="Social-Bild Vorschau"
+                                            aria-label="Social-Bild Vorschau"
+                                        >
+                                            <Icon icon="mdi:image-outline" class="size-3.5" />
+                                            Bild
+                                        </button>
+                                    {/if}
+                                </div>
                             {/if}
 
-                            <span class="ml-auto"></span>
-                            <button
-                                type="button"
-                                onclick={() => jumpToEventInGrid(item)}
-                                class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
-                                title={t(T.calendar_jump_to_month)}
-                                aria-label={t(T.calendar_jump_to_month)}
-                            >
-                                <Icon icon="mdi:calendar-search" class="size-3.5" />
-                                Im Grid
-                            </button>
+                            <!-- Gruppe: Anzeigen (rechts auf Desktop, eigene Zeile auf Mobile wenn nötig) -->
+                            <div class="inline-flex items-center gap-1 sm:ml-auto">
+                                <button
+                                    type="button"
+                                    onclick={() => jumpToEventInGrid(item)}
+                                    class="inline-flex items-center gap-1 rounded px-1.5 py-1 text-[11px] text-stein-500 hover:bg-white"
+                                    title={t(T.calendar_jump_to_month)}
+                                    aria-label={t(T.calendar_jump_to_month)}
+                                >
+                                    <Icon icon="mdi:calendar-search" class="size-3.5" />
+                                    Im Grid
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>