Nach dem Merge/Deploy von #7 auf echten Handy-/Tablet-Breiten getestet (die
Hauptzielgruppe dieser App laut Betreiber) - der CSS-`zoom`-Skalierungsansatz
liess auf schmalen Viewports den kompletten Seiteninhalt (inkl. des geteilten
App-Rahmens aus (app)/layout.tsx, der NICHT angetastet wurde) horizontal
ueberlaufen.
Root Causes und Fixes:
- StepDots (7 Kreise fixer 44px-Groesse) sprengten bereits ungezoomt fast die
gesamte Handybreite - jetzt responsiv kleiner (28px) unterhalb des sm-
Breakpoints, volle Groesse ab Tablet-Breite.
- `zoom` blaeht die fuer den Inhalt benoetigte Breite auf; ein zusaetzlicher
`maxWidth: calc((100vw - 56px) / 1.3)` auf dem Zoom-Wrapper deckelt das hart
unabhaengig vom (nicht editierbaren) Eltern-Layout, das per Standard-
Flexbox-min-width:auto sonst durch einen zu breiten Nachfahren mitwachsen
wuerde. 56px = Seiten-Padding + Puffer fuer die vertikale Scrollleiste, die
100vw mit einrechnet ohne selbst nutzbaren Platz zu bieten.
- Zurueck/Weiter/Patient-speichern-Buttons stapeln sich jetzt auf schmalen
Bildschirmen statt nebeneinander gequetscht zu werden.
Verifiziert per echtem Live-Test gegen die deployte NAS-Instanz (iframe-
basierte Breitensimulation 360/390/768px, scrollWidth===clientWidth an allen
dreien) sowie visuell per Screenshot.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
adminandClaude Sonnet 5