From 650fa0f36ae938fdec45007bdb5d3180d3e0b895 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Sun, 12 Apr 2026 19:39:19 +0200
Subject: [PATCH] Fix mobile header layout: hide secondary items on small
 screens

- Participant list: hidden on mobile (sm:block)
- Undo/redo buttons: hidden on mobile (sm:flex)
- Connection status: hidden on mobile (sm:inline)
- Header: no-wrap, tighter padding on mobile
- Username input: text-base on mobile to prevent iOS auto-zoom

Keeps profile selector and export button visible on all sizes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/ParticipantList.tsx |  2 +-
 apps/planner/app/components/SessionView.tsx     | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/apps/planner/app/components/ParticipantList.tsx b/apps/planner/app/components/ParticipantList.tsx
index d3837a2..154c3d9 100644
--- a/apps/planner/app/components/ParticipantList.tsx
+++ b/apps/planner/app/components/ParticipantList.tsx
@@ -109,7 +109,7 @@ export function ParticipantList({ yjs }: ParticipantListProps) {
               onBlur={commitEdit}
               onKeyDown={handleKeyDown}
               maxLength={20}
-              className="w-20 rounded border border-gray-300 px-1 py-0 text-xs text-gray-700 focus:border-blue-500 focus:outline-none"
+              className="w-20 rounded border border-gray-300 px-1 py-0 text-base sm:text-xs text-gray-700 focus:border-blue-500 focus:outline-none"
             />
           ) : (
             <button
diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx
index 8131d42..312316f 100644
--- a/apps/planner/app/components/SessionView.tsx
+++ b/apps/planner/app/components/SessionView.tsx
@@ -223,14 +223,16 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
 
   return (
     <>
-      <header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2 pt-[max(0.5rem,env(safe-area-inset-top))]">
-        <div className="flex items-center gap-2 md:gap-4">
+      <header className="flex items-center justify-between gap-2 border-b border-gray-200 px-3 py-1.5 pt-[max(0.375rem,env(safe-area-inset-top))] sm:px-4 sm:py-2">
+        <div className="flex items-center gap-1.5 sm:gap-4 min-w-0">
           <Link to="/" className="hidden text-lg font-semibold text-gray-900 hover:text-blue-600 sm:block">
             {t("title")}
           </Link>
           <ProfileSelector yjs={yjs} />
-          <ParticipantList yjs={yjs} />
-          <div className="flex gap-1">
+          <div className="hidden sm:block">
+            <ParticipantList yjs={yjs} />
+          </div>
+          <div className="hidden sm:flex gap-1">
             <button
               onClick={undo}
               disabled={!canUndo}
@@ -249,7 +251,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
             </button>
           </div>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 sm:gap-3 shrink-0">
           {callbackUrl && callbackToken && (
             <SaveToJournalButton
               yjs={yjs}
@@ -262,7 +264,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
           {computing && (
             <span className="text-xs text-blue-600">{t("computingRoute")}</span>
           )}
-          <span className="text-sm text-gray-500">
+          <span className="hidden text-sm text-gray-500 sm:inline">
             {yjs.connected ? t("connected") : t("connecting")} · {sessionId.slice(0, 8)}
           </span>
         </div>