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

Add basic responsive layout for tablet and mobile

Browse source 
Planner: hide title on small screens, wrap header items, hide waypoint
sidebar below md breakpoint (map takes full width).
Journal: stack route stats and action buttons on mobile, responsive
header layout on route detail.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ullrich Schäfer 2026-03-25 02:11:22 +01:00
parent bdb72ae141
commit 69f420e879
No known key found for this signature in database
GPG key ID: A32FF691A0F752D9
2 changed files with 7 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,9 +43,9 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
return (
<>
<header className="flex items-center justify-between border-b border-gray-200 px-4 py-2">
<div className="flex items-center gap-4">
<h1 className="text-lg font-semibold text-gray-900">trails.cool Planner</h1>
<header className="flex flex-wrap items-center justify-between gap-2 border-b border-gray-200 px-4 py-2">
<div className="flex items-center gap-2 md:gap-4">
<h1 className="hidden text-lg font-semibold text-gray-900 sm:block">trails.cool Planner</h1>
<ProfileSelector yjs={yjs} />
</div>
<div className="flex items-center gap-3">
@ -95,7 +95,7 @@ export function SessionView({ sessionId, callbackUrl, callbackToken, returnUrl,
<ElevationChart yjs={yjs} onHover={handleElevationHover} />
</Suspense>
</main>
<aside className="w-72 border-l border-gray-200 bg-white">
<aside className="hidden w-72 border-l border-gray-200 bg-white md:block">
<Suspense fallback={null}>
<WaypointSidebar yjs={yjs} routeStats={routeStats} />
</Suspense>