From 62023da94f71decb3607f5ae401dd249560f59b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20F=C3=B6rtsch?= <mail@felixfoertsch.de>
Date: Fri, 13 Mar 2026 07:50:51 +0100
Subject: [PATCH] fix ErstgespraechCard overflow on mobile, add safe-area
 padding for tabbar

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../prozess/components/process-stepper.tsx    | 40 ++++++++++---------
 src/routes/__root.tsx                         |  5 ++-
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/features/prozess/components/process-stepper.tsx b/src/features/prozess/components/process-stepper.tsx
index 8277282..80c40b9 100644
--- a/src/features/prozess/components/process-stepper.tsx
+++ b/src/features/prozess/components/process-stepper.tsx
@@ -151,29 +151,33 @@ function ErstgespraechCard({
 	const [editing, setEditing] = useState(false);
 
 	return (
-		<div className="rounded-lg border p-3">
+		<div className="min-w-0 rounded-lg border p-3">
 			<button
 				type="button"
-				className="flex w-full items-center gap-3 text-left text-sm"
+				className="flex w-full min-w-0 items-start gap-3 text-left text-sm"
 				onClick={() => setExpanded(!expanded)}
 			>
-				<span className="flex-1 font-medium">
-					{erstgespraech.therapeut_name}
-					{erstgespraech.therapeut_stadt
-						? ` (${erstgespraech.therapeut_stadt})`
-						: ""}
-				</span>
-				<span className="flex items-center gap-2">
-					{erstgespraech.diagnose && (
-						<Badge variant="secondary">{erstgespraech.diagnose}</Badge>
-					)}
-					{erstgespraech.dringlichkeitscode && <Badge>Dringlichkeit</Badge>}
-					<span className="text-xs text-muted-foreground">
-						{erstgespraech.sitzung_count}{" "}
-						{Number(erstgespraech.sitzung_count) === 1
-							? "Sitzung"
-							: "Sitzungen"}
+				<span className="min-w-0 flex-1">
+					<span className="font-medium">
+						{erstgespraech.therapeut_name}
+						{erstgespraech.therapeut_stadt
+							? ` (${erstgespraech.therapeut_stadt})`
+							: ""}
 					</span>
+					<span className="mt-1 flex flex-wrap items-center gap-1.5">
+						{erstgespraech.diagnose && (
+							<Badge variant="secondary">{erstgespraech.diagnose}</Badge>
+						)}
+						{erstgespraech.dringlichkeitscode && <Badge>Dringlichkeit</Badge>}
+						<span className="text-xs text-muted-foreground">
+							{erstgespraech.sitzung_count}{" "}
+							{Number(erstgespraech.sitzung_count) === 1
+								? "Sitzung"
+								: "Sitzungen"}
+						</span>
+					</span>
+				</span>
+				<span className="shrink-0 pt-0.5">
 					{expanded ? (
 						<ChevronDown className="size-4 text-muted-foreground" />
 					) : (
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 81527cd..e773ed9 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -29,7 +29,10 @@ export const Route = createRootRoute({
 		return (
 			<div className="flex min-h-screen flex-col bg-background text-foreground">
 				{!hideNav && !installed && <InstallBanner />}
-				<main className="mx-auto w-full max-w-2xl flex-1 px-4 pb-20 pt-6">
+				<main
+					className="mx-auto w-full max-w-2xl flex-1 px-4 pt-6"
+					style={{ paddingBottom: "calc(5rem + env(safe-area-inset-bottom))" }}
+				>
 					<Outlet />
 				</main>
 				{!hideNav && (