Fix #217: Mobile-Overflow im Deployment-Wizard - #224
Merged
Conversation
Drei gemeldete UI-Bugs im DeploymentWizard auf schmalen Viewports: 1. Gruppenverwaltung-Header: Auto-Verteilen + grüner "Gruppe hinzufügen"-Button liefen rechts aus dem Bild. Header-Row und Button-Gruppe bekommen flex-wrap + gap-2 → Buttons brechen mobil sauber unter den Titel um. Gleiches Muster in StackAssignmentManager und GroupToStackAssigner (identische Header-Struktur). 2. Wizard-Footer: "Detaillierte Konfiguration" + "Direkt zur Übersicht" ragten über den rechten Rand. flex-wrap auf der justify-between-Row und der rechten Button-Gruppe. 3. Step-Progress-Labels: "Konfiguration" und "Netzwerk" kollidierten ohne Abstand. Label-Font mobil auf text-[10px], ab md: via md:text-xs zurück auf Original → Labels bekommen Platz. Neue Utilities text-[10px] + md:text-xs in der prebuilt index.css ergänzt (sonst stille No-Ops). flex-wrap/gap-2 sind breakpoint-frei und auf Desktop unsichtbar. Verifiziert per Playwright (repro-217.mjs): bei 360px und 390px null Overflow-Offender mehr; Desktop (1440px) byte-identisch zur staging-Baseline (MD5-Vergleich, Wizard-Screenshots unverändert). npm run build grün.
RamonaKT
self-requested a review
July 24, 2026 21:22
RamonaKT
approved these changes
Jul 24, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Behebt #217 — drei UI-Bugs im DeploymentWizard auf schmalen Viewports (mobile).
Reproduziert (nicht bereits gefixt)
Per Playwright-Harness (
cypress-visual/repro-217.mjs) auf aktuellemstagingbestätigt: bei 360px und 390px ragten mehrere Elemente über den rechten Rand. Screenshots aus dem Issue exakt reproduziert.Fixes
Auto-Verteilen+ grünerGruppe hinzufügen-Button liefen rechts raus →flex-wrap+gap-2auf Header-Row und Button-Gruppe. Gleiches Muster inStackAssignmentManagerundGroupToStackAssigner(identische Struktur).Detaillierte Konfiguration+Direkt zur Übersichtragten über den Rand →flex-wrapauf derjustify-between-Row und rechten Button-Gruppe.Konfiguration/Netzwerkkollidierten ohne Abstand → Label-Font mobiltext-[10px], abmd:viamd:text-xszurück auf Original.Neue Utilities
text-[10px]+md:text-xsin der prebuiltsrc/index.cssergänzt (sonst stille No-Ops in diesem Projekt).Verifikation
window.innerWidth).staging-Baseline (MD5-Vergleich vor/nach). Alle Änderungen sind breakpoint-frei (flex-wrapwirkt nur bei Platzmangel) odermd:-gegatet.npm run buildgrün.