From 69f420e879f04e13e28e711030231b643a750356 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Wed, 25 Mar 2026 02:11:22 +0100
Subject: [PATCH] Add basic responsive layout for tablet and mobile

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>
---
 apps/journal/app/routes/routes.$id.tsx      | 6 +++---
 apps/planner/app/components/SessionView.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/journal/app/routes/routes.$id.tsx b/apps/journal/app/routes/routes.$id.tsx
index 6e90df0..1533e95 100644
--- a/apps/journal/app/routes/routes.$id.tsx
+++ b/apps/journal/app/routes/routes.$id.tsx
@@ -90,7 +90,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
 
   return (
     <div className="mx-auto max-w-4xl px-4 py-8">
-      <div className="flex items-start justify-between">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
         <div>
           <h1 className="text-2xl font-bold text-gray-900">{route.name}</h1>
           {route.description && (
@@ -98,7 +98,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
           )}
         </div>
         {isOwner && (
-          <div className="flex gap-2">
+          <div className="flex flex-wrap gap-2">
             <button
               onClick={handleEditInPlanner}
               disabled={editLoading}
@@ -125,7 +125,7 @@ export default function RouteDetailPage({ loaderData }: Route.ComponentProps) {
         )}
       </div>
 
-      <div className="mt-6 grid grid-cols-3 gap-4">
+      <div className="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
         {route.distance != null && (
           <div className="rounded-md bg-gray-50 p-4">
             <p className="text-2xl font-bold text-gray-900">
diff --git a/apps/planner/app/components/SessionView.tsx b/apps/planner/app/components/SessionView.tsx
index 779e4f1..cf02c8c 100644
--- a/apps/planner/app/components/SessionView.tsx
+++ b/apps/planner/app/components/SessionView.tsx
@@ -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>