fix: Calendar-Toolbar bricht Mobile-Wrap-Layout pro Gruppe sauber um
Deploy / verify (push) Successful in 1m0s
Deploy / deploy (push) Successful in 1m28s

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>
This commit is contained in:
Peter Meier
2026-06-07 13:23:41 +02:00
parent 155d9fb4b0
commit 21b555b61d
+13 -5
View File
@@ -821,9 +821,12 @@
</div> </div>
{/if} {/if}
<!-- Kompakte Action-Toolbar: gruppiert (Kalender · Teilen · Anzeigen) mit Separatoren --> <!-- 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"> Auf Mobile bleiben Label+Buttons pro Gruppe via inline-flex zusammen,
<!-- Kalender-Aktionen --> 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> <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Kalender</span>
<button <button
type="button" type="button"
@@ -845,12 +848,14 @@
<Icon icon="mdi:google" class="size-3.5" /> <Icon icon="mdi:google" class="size-3.5" />
Google Google
</a> </a>
</div>
{#if feedHost} {#if feedHost}
{@const shareKey = item._slug ?? String(item.start.getTime())} {@const shareKey = item._slug ?? String(item.start.getTime())}
{@const copied = copyToastKey === shareKey} {@const copied = copyToastKey === shareKey}
{@const shared = shareToastKey === shareKey} {@const shared = shareToastKey === shareKey}
<span class="mx-1 h-4 w-px bg-stein-300" aria-hidden="true"></span> <!-- 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> <span class="px-1.5 text-[10px] uppercase tracking-wide text-stein-400">Teilen</span>
<button <button
type="button" type="button"
@@ -884,9 +889,11 @@
Bild Bild
</button> </button>
{/if} {/if}
</div>
{/if} {/if}
<span class="ml-auto"></span> <!-- Gruppe: Anzeigen (rechts auf Desktop, eigene Zeile auf Mobile wenn nötig) -->
<div class="inline-flex items-center gap-1 sm:ml-auto">
<button <button
type="button" type="button"
onclick={() => jumpToEventInGrid(item)} onclick={() => jumpToEventInGrid(item)}
@@ -900,6 +907,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</details> </details>
</li> </li>
{/snippet} {/snippet}