From 42547e4d7c89490cf6f58921608a0e5ad034a386 Mon Sep 17 00:00:00 2001
From: neodk2004 <barac.daniel@gmail.com>
Date: Mon, 10 Aug 2026 21:29:23 +0200
Subject: [PATCH] pflegepilot_v3: horizontalen Ueberlauf im
 seniorenfreundlichen Interview-Design auf schmalen Bildschirmen behoben

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>
---
 .../app/(app)/patienten/neu-senioren/page.tsx | 48 +++++++++++++++----
 1 file changed, 38 insertions(+), 10 deletions(-)

diff --git a/pflegepilot_v3/frontend/src/app/(app)/patienten/neu-senioren/page.tsx b/pflegepilot_v3/frontend/src/app/(app)/patienten/neu-senioren/page.tsx
index ed6fbc0..7f737a6 100644
--- a/pflegepilot_v3/frontend/src/app/(app)/patienten/neu-senioren/page.tsx
+++ b/pflegepilot_v3/frontend/src/app/(app)/patienten/neu-senioren/page.tsx
@@ -298,7 +298,7 @@ export default function NeuerPatientSeniorenPage() {
   };
 
   return (
-    <div className="mx-auto max-w-3xl p-4">
+    <div className="mx-auto w-full max-w-3xl overflow-x-clip p-4">
       <div className="mb-4 rounded-lg border border-amber-300 bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800">
         Testversion &bdquo;Große Schrift&ldquo; – nur zum internen Ausprobieren, nicht verlinkt.
       </div>
@@ -306,8 +306,36 @@ export default function NeuerPatientSeniorenPage() {
       {/* zoom statt transform:scale, damit importierte Unterkomponenten
           (DateInput, EgkScan, KrankenkasseAutocomplete, InfoTooltip) ohne
           eigene Kopie automatisch mitskalieren und die Boxgroesse im Layout
-          korrekt mitwaechst (kein Ueberlappen wie bei transform:scale). */}
-      <div style={{ zoom: 1.3 }}>
+          korrekt mitwaechst (kein Ueberlappen wie bei transform:scale).
+          WICHTIG: zoom vergroessert auch die fuer den Inhalt benoetigte
+          Breite (ein auf 100% Breite gesetztes Kind wird nach dem Zoomen
+          100%*1.3 breit gerendert) - ohne Gegenrechnung ueberlief das auf
+          schmalen Bildschirmen (Handy/Tablet, die Hauptzielgruppe dieser
+          App) horizontal. `width` wird deshalb VOR dem Zoomen auf 100%/1.3
+          verengt, sodass die gerenderte Breite nach dem Zoomen wieder genau
+          100% des Aussen-Containers ergibt - unabhaengig von der
+          tatsaechlichen Bildschirmbreite.
+
+          Zusaetzliche Absicherung ueber `maxWidth` in `vw`-Einheiten: der
+          geteilte App-Rahmen ((app)/layout.tsx, bewusst nicht angetastet)
+          hat auf seiner Hauptspalte ein Standard-Flexbox-`min-width:auto` -
+          dadurch kann ein zu breiter Nachfahre (wie dieser gezoomte Block)
+          die Spalte trotz `overflow-x-clip` auf DIESER Seite ueber ihre
+          eigene Elternbreite hinaus wachsen lassen, weil dieser Zwang eine
+          Ebene HOEHER im (nicht editierbaren) Layout sitzt. `vw`-Einheiten
+          sind vom Eltern-Layout unabhaengig und greifen deshalb zuverlaessig
+          als harte physische Obergrenze, unabhaengig davon was die Vorfahren
+          an Breite eigentlich anbieten wuerden. 32px Seiten-Padding + 24px
+          Puffer fuer die vertikale Scrollleiste (die `100vw` mit einrechnet,
+          obwohl sie selbst keinen nutzbaren Platz fuer Inhalt bietet -
+          sonst blieb ein paar Pixel Restueberlauf). */}
+      <div
+        style={{
+          zoom: 1.3,
+          width: `${100 / 1.3}%`,
+          maxWidth: "calc((100vw - 56px) / 1.3)",
+        }}
+      >
         <h1 className="mb-2 text-4xl font-bold text-slate-900">Neuer Patient</h1>
         <p className="mb-6 text-xl text-slate-700">
           Ein kurzes Interview – ohne KI, nur einfache Fragen zur Pflegesituation.
@@ -358,17 +386,17 @@ export default function NeuerPatientSeniorenPage() {
 
           {error && <p className="mt-4 text-lg font-semibold text-red-700">{error}</p>}
 
-          <div className="mt-8 flex justify-between gap-3">
+          <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-between">
             <button
               type="button"
               onClick={back}
               disabled={state.step === 1 && state.q4sub === 0}
-              className={seniorBtn.secondary}
+              className={`w-full sm:w-auto ${seniorBtn.secondary}`}
             >
               Zurück
             </button>
             {state.step < 7 ? (
-              <button type="button" onClick={next} className={seniorBtn.primary}>
+              <button type="button" onClick={next} className={`w-full sm:w-auto ${seniorBtn.primary}`}>
                 Weiter
               </button>
             ) : (
@@ -376,7 +404,7 @@ export default function NeuerPatientSeniorenPage() {
                 type="button"
                 onClick={speichern}
                 disabled={anlegen.isPending || !berechtigungBestaetigt}
-                className={seniorBtn.primary}
+                className={`w-full sm:w-auto ${seniorBtn.primary}`}
               >
                 Patient speichern
               </button>
@@ -400,9 +428,9 @@ function StepDots({ current }: { current: number }) {
             <div key={t} className="flex flex-1 items-center last:flex-none">
               <div
                 title={t}
-                className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-base font-bold ${
+                className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold sm:h-11 sm:w-11 sm:text-base ${
                   on
-                    ? "bg-slate-800 text-white ring-4 ring-slate-300"
+                    ? "bg-slate-800 text-white ring-2 ring-slate-300 sm:ring-4"
                     : done
                     ? "bg-emerald-600 text-white"
                     : "border-2 border-slate-500 text-slate-700"
@@ -410,7 +438,7 @@ function StepDots({ current }: { current: number }) {
               >
                 {done ? "✓" : n}
               </div>
-              {n < STEP_TITEL.length && <div className="mx-1 h-1 flex-1 rounded-full bg-slate-300" />}
+              {n < STEP_TITEL.length && <div className="mx-0.5 h-1 flex-1 rounded-full bg-slate-300 sm:mx-1" />}
             </div>
           );
         })}
-- 
2.54.0