Die Idee "zweites, seniorenfreundliches Design per CSS-Skalierung" wurde nach diesem Test verworfen - siehe PR #9 (entfernt die Basis-Version wieder aus master). Der reine zoom-Skalierungsansatz auf einer Kopie der bestehenden Seite reicht für ein wirklich seniorenfreundliches Design nicht aus; es bräuchte einen echten UI-Umbau, nicht nur eine vergrößerte Kopie.
Dieser Branch bleibt als vollständiger Referenzstand offen liegen (Original-Design-Kopie + alle Mobile-Overflow-Fixes zusammen) - falls das Thema später nochmal aufgegriffen wird, ist hier der komplette bisherige Lern- und Codestand nachvollziehbar, inklusive der konkreten Probleme, die eine reine Skalierungslösung mit sich bringt (siehe Commit-Beschreibungen).
Ursprüngliche Zusammenfassung (Mobile-Fix-Commit)
StepDots (7 feste 44px-Kreise) sprengten bereits ungezoomt fast die Handybreite
zoom bläht die benötigte Breite auf, auch im geteilten App-Rahmen
Buttons stapelten sich nicht auf schmalen Bildschirmen
🤖 Generated with Claude Code
## Status: bewusst NICHT mergen
Die Idee "zweites, seniorenfreundliches Design per CSS-Skalierung" wurde nach diesem Test verworfen - siehe PR #9 (entfernt die Basis-Version wieder aus master). Der reine `zoom`-Skalierungsansatz auf einer Kopie der bestehenden Seite reicht für ein wirklich seniorenfreundliches Design nicht aus; es bräuchte einen echten UI-Umbau, nicht nur eine vergrößerte Kopie.
Dieser Branch bleibt als vollständiger Referenzstand offen liegen (Original-Design-Kopie + alle Mobile-Overflow-Fixes zusammen) - falls das Thema später nochmal aufgegriffen wird, ist hier der komplette bisherige Lern- und Codestand nachvollziehbar, inklusive der konkreten Probleme, die eine reine Skalierungslösung mit sich bringt (siehe Commit-Beschreibungen).
## Ursprüngliche Zusammenfassung (Mobile-Fix-Commit)
- StepDots (7 feste 44px-Kreise) sprengten bereits ungezoomt fast die Handybreite
- `zoom` bläht die benötigte Breite auf, auch im geteilten App-Rahmen
- Buttons stapelten sich nicht auf schmalen Bildschirmen
🤖 Generated with Claude Code
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>
admin
changed title from pflegepilot_v3: horizontalen Ueberlauf im Interview-Design-Test auf Handy/Tablet behoben to [Für später] pflegepilot_v3: seniorenfreundliches Interview-Design - kompletter Stand inkl. Mobile-Fixes2026-08-10 21:39:42 +02:00
You are not authorized to merge this pull request.
This pull request can be merged automatically.
View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Status: bewusst NICHT mergen
Die Idee "zweites, seniorenfreundliches Design per CSS-Skalierung" wurde nach diesem Test verworfen - siehe PR #9 (entfernt die Basis-Version wieder aus master). Der reine
zoom-Skalierungsansatz auf einer Kopie der bestehenden Seite reicht für ein wirklich seniorenfreundliches Design nicht aus; es bräuchte einen echten UI-Umbau, nicht nur eine vergrößerte Kopie.Dieser Branch bleibt als vollständiger Referenzstand offen liegen (Original-Design-Kopie + alle Mobile-Overflow-Fixes zusammen) - falls das Thema später nochmal aufgegriffen wird, ist hier der komplette bisherige Lern- und Codestand nachvollziehbar, inklusive der konkreten Probleme, die eine reine Skalierungslösung mit sich bringt (siehe Commit-Beschreibungen).
Ursprüngliche Zusammenfassung (Mobile-Fix-Commit)
zoombläht die benötigte Breite auf, auch im geteilten App-Rahmen🤖 Generated with Claude Code
pflegepilot_v3: horizontalen Ueberlauf im Interview-Design-Test auf Handy/Tablet behobento [Für später] pflegepilot_v3: seniorenfreundliches Interview-Design - kompletter Stand inkl. Mobile-FixesView command line instructions
Checkout
From your project repository, check out a new branch and test the changes.