trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix mobile header layout: hide secondary items on small screens

Browse source 
- 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>
This commit is contained in:
Ullrich Schäfer 2026-04-12 19:39:19 +02:00
parent 9b3c0a8d44
commit 650fa0f36a
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/planner/app/components/ParticipantList.tsx
View file

@ -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

14
apps/planner/app/components/SessionView.tsx
View file

@ -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>