Version 1.6.6 — die Seitenleiste klappt am Telefon nicht mehr auf und zu

Zwei Fehler, die nur auf schmalen Schirmen auffielen.

Die Seitenleiste trug ihre Anfangsposition NUR in der Alpine-Bindung, nicht in
den statischen Klassen. Bis Alpine startete, stand sie damit auf translate-x-0,
also offen — und wurde danach hinausgeschoben. Zusammen mit transition-transform
war das keine unsichtbare Korrektur, sondern eine sichtbare Fahrt: bei JEDEM
Seitenwechsel klappte sie kurz auf und wieder zu.

Jetzt steht -translate-x-full statisch in der Klassenliste; das erste Bild zeigt
sie geschlossen, es gibt nichts mehr zu korrigieren. Geoeffnet wird ueber
!translate-x-0 — mit Ausrufezeichen, weil bei zwei gleich starken
Tailwind-Klassen die Reihenfolge im Stylesheet entscheidet und nicht die im
Element.

Und die zwei Update-Knoepfe liefen ueber den Rand: zusammen breiter als ein
Telefon, und shrink-0 verbot ihnen zusaetzlich, schmaler zu werden. Jetzt
flex-wrap, shrink-0 erst ab sm.

148 Layout-Tests gruen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

VERSION

@@ -1 +1 @@
-1.6.5
+1.6.6

resources/views/components/shell/nav.blade.php

@@ -24,8 +24,20 @@
     density, and that lives in the tokens — not here.
 --}}
 <aside
-    class="fixed inset-y-0 left-0 z-50 flex w-[15.5rem] flex-col border-r border-line bg-surface px-3 py-4 shadow-md transition-transform lg:static lg:h-screen lg:translate-x-0 lg:shadow-none"
-    :class="nav ? 'translate-x-0' : '-translate-x-full'"
+    {{-- `-translate-x-full` steht STATISCH in der Klassenliste, nicht nur in
+         der Bindung darunter.
+
+         Vorher trug das Element bis zum Start von Alpine gar keine
+         Verschiebung — es stand also offen im ersten Bild, und Alpine schob es
+         danach hinaus. Zusammen mit `transition-transform` war das keine
+         unsichtbare Korrektur, sondern eine sichtbare Fahrt: Auf dem Telefon
+         klappte die Leiste bei JEDEM Seitenwechsel kurz auf und wieder zu.
+
+         `!translate-x-0` mit Ausrufezeichen, weil die statische Klasse sonst
+         gewinnt — welche von zwei gleich starken Tailwind-Klassen greift,
+         entscheidet die Reihenfolge im Stylesheet und nicht die im Element. --}}
+    class="fixed inset-y-0 left-0 z-50 flex w-[15.5rem] -translate-x-full flex-col border-r border-line bg-surface px-3 py-4 shadow-md transition-transform lg:static lg:h-screen lg:translate-x-0 lg:shadow-none"
+    :class="nav && '!translate-x-0'"
 >
     <div class="flex shrink-0 items-center justify-between gap-2 px-2.5 pb-5">
         <a href="{{ $console ? \App\Support\AdminArea::home() : route('dashboard') }}" class="flex items-center gap-2.5">

resources/views/livewire/admin/settings.blade.php

@@ -143,7 +143,13 @@
                              released above the installed version, a run already in
                              flight, no agent, or a check already pending (so a second
                              click cannot collide with the first and be refused). --}}
-                        <div class="flex shrink-0 items-center gap-2">
+                        {{-- `flex-wrap`, und `shrink-0` erst ab `sm`. Zwei Knöpfe mit
+                             deutschen Beschriftungen sind zusammen breiter als ein
+                             Telefon; `shrink-0` verbot ihnen zusätzlich, schmaler zu
+                             werden, also lief die Zeile über den Rand hinaus. Auf
+                             breiten Schirmen bleibt alles wie bisher — dort ist Platz,
+                             und dort soll die Gruppe auch nicht schrumpfen. --}}
+                        <div class="flex flex-wrap items-center gap-2 sm:shrink-0">
                             @if ($update['running'])
                                 <x-ui.button variant="secondary" :disabled="true">
                                     <x-ui.icon name="refresh" class="size-4 animate-spin" />