fix(client): a phone turned sideways stays in the phone layout

The phone shell was chosen by width alone, and most phones are wider than
767px in landscape, so turning one swapped the whole route tree for the
desktop planner and an open sheet, its input and the map position were
lost. The phone query now also covers a touch screen under 500px tall,
which no tablet is. It lives in one place: the shell, the planner and todo
hooks, the warnings banner, dialog focus and the stylesheets read it, and
six components that measured the window once on mount now follow it.

client/src/components/Collab/CollabNotes.tsx

@@ -24,6 +24,7 @@ import { NoteCard } from './CollabNotesCard'
 import { FilePreviewPortal } from './CollabNotesFilePreviewPortal'
 import { AuthedImg } from './CollabNotesAuthedImg'
 import { safeExternalHref } from '../../utils/safeUrl'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 // ── Main Component ──────────────────────────────────────────────────────────
 interface CollabNotesProps {
@@ -343,6 +344,7 @@ function CollabNotesGrid(S: NotesState) {
     sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
+  const isPhone = useIsPhone()
   return (
     <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
       {sortedNotes.length === 0 ? (
@@ -352,7 +354,7 @@ function CollabNotesGrid(S: NotesState) {
         /* ── Notes grid — 2 columns ── */
         <div style={{
           display: 'grid',
-          gridTemplateColumns: window.innerWidth < 768 ? '1fr' : 'repeat(2, minmax(0, 1fr))',
+          gridTemplateColumns: isPhone ? '1fr' : 'repeat(2, minmax(0, 1fr))',
           gap: 10,
         }}>
           {sortedNotes.map(note => (

client/src/components/Files/FileManager.tsx

@@ -44,7 +44,7 @@ export default function FileManager(props: FileManagerProps) {
       {showTrash ? <TrashView {...S} /> : <FilesView {...S} />}
 
       <style>{`
-        @media (max-width: 767px) {
+        @media (max-width: 767px), (pointer: coarse) and (max-height: 500px) {
           .file-actions button { padding: 8px !important; }
           .file-actions svg { width: 18px !important; height: 18px !important; }
         }

client/src/components/Map/MapView.tsx

@@ -893,8 +893,11 @@ export const MapView = memo(function MapView({
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   // The chrome overlaying the map (side panels, day detail). Kept as a plain box so both the
   // Leaflet fit options and the opening-camera maths can read the same numbers.
+  // Followed rather than read once: a phone turned sideways and back crosses
+  // the breakpoint twice, and the padding here and the locate button further
+  // down used to stay with whatever the map saw when it mounted.
+  const isMobile = useIsPhone()
   const paddingBox = useMemo((): ViewportPadding => {
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
     if (isMobile) return { top: 20, right: 40, bottom: 20, left: 40 }
     return {
       top: 60,
@@ -902,7 +905,7 @@ export const MapView = memo(function MapView({
       bottom: hasInspector ? 320 : hasDayDetail ? 280 : 60,
       left: leftWidth + 40,
     }
-  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
+  }, [isMobile, leftWidth, rightWidth, hasInspector, hasDayDetail])
 
   const paddingOpts = useMemo(() => leafletPadding(paddingBox), [paddingBox])
 
@@ -1158,10 +1161,6 @@ export const MapView = memo(function MapView({
   const { position: userPosition, mode: trackingMode, error: trackingError, errorCode: trackingErrorCode, cycleMode: cycleTrackingMode } = useGeolocation()
   // Desktop browsers only get IP-based geolocation (city-level accuracy),
   // so the button would be misleading. Mobile, where real GPS lives, keeps it.
-  // The width is followed rather than read once: a phone turned sideways and
-  // back crosses the breakpoint twice, and the button used to stay with
-  // whatever the map saw when it mounted.
-  const isMobile = useIsPhone()
   // When the day-detail panel is open it slides up over the map (bottom: navh+20,
   // height var(--day-panel-h)) and covers the button's band, so lift the button
   // above it; otherwise keep the plain bottom-nav offset. #1348

client/src/components/Map/MapViewGL.tsx

@@ -2323,12 +2323,11 @@ export function MapViewGL({
 
   // Fit bounds on fitKey change — matches the Leaflet BoundsController
   const paddingOpts = useMemo(() => {
-    const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
     if (isMobile) return { top: 40, right: 20, bottom: 40, left: 20 }
     const top = 60
     const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
     return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
-  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
+  }, [isMobile, leftWidth, rightWidth, hasInspector, hasDayDetail])
 
   const prevFitKey = useRef<number | null>(-1)
   const pendingRouteFitRef = useRef<{ fitKey: number | null; routeKey: string } | null>(null)

client/src/components/Planner/PlaceFormModal.tsx

@@ -76,7 +76,7 @@ interface PlaceFormModalProps {
   dayAssignments?: Assignment[]
   /** Mobile keeps the untouched single-column form; desktop adds the saved-place
    *  picker column when the Collections addon is enabled. Sourced from the trip
-   *  planner's matchMedia('(max-width:767px)'). */
+   *  planner's useIsPhone(). */
   isMobile?: boolean
   /** Opens the Costs editor for this place's linked expense (#1298) — the same
    *  seam the booking and transport modals use. */

client/src/components/Planner/TransitJourneyModal.tsx

@@ -15,6 +15,7 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { splitReservationDateTime, formatTime } from '../../utils/formatters'
 import { TransitTitle, TransitMetaBadges, TransitWalkDivider, fmtTransitDuration } from './transitDisplay'
 import type { Reservation } from '../../types'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 /**
  * The journey view for an automated public-transit entry (#1065): a roomy modal
@@ -52,7 +53,7 @@ interface TransitJourneyModalProps {
 
 export default function TransitJourneyModal({ reservation, onClose, onSave, onDelete, onChangeRoute, onEditDetails, canEdit }: TransitJourneyModalProps) {
   const { t, locale } = useTranslation()
-  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  const isMobile = useIsPhone()
   const timeFormat = useSettingsStore(st => st.settings.time_format) || '24h'
   const res = reservation
   const meta = typeof res.metadata === 'string' ? (() => { try { return JSON.parse(res.metadata || '{}') } catch { return {} } })() : (res.metadata || {})

client/src/components/Planner/TransitSearchPanel.tsx

@@ -13,6 +13,7 @@ import type { Day, Place, Accommodation, Reservation } from '../../types'
 import { useTripStore } from '../../store/tripStore'
 import { isCarrierTransport } from '../../utils/dayMerge'
 import type { TransitProvider } from '@trek/shared'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 /**
  * Public transit route search (#1065), backed by Transitous (MOTIS) through the
@@ -465,7 +466,7 @@ export default function TransitSearchPanel({ day, days, places, accommodations =
   const { t, language } = useTranslation()
   const toast = useToast()
   const is12h = useSettingsStore(s => s.settings.time_format) === '12h'
-  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  const isMobile = useIsPhone()
 
   const [from, setFrom] = useState<PickedPlace | null>(initialFrom)
   const [to, setTo] = useState<PickedPlace | null>(initialTo)

client/src/components/Planner/TripWarningsBanner.test.tsx

@@ -5,6 +5,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { usePluginStore, type ActivePlugin } from '../../store/pluginStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import TripWarningsBanner from './TripWarningsBanner';
+import { PHONE_QUERY } from '../../mobile/useIsPhone';
 
 type Warning = { pluginId: string; level: 'info' | 'warning' | 'error'; message: string };
 
@@ -28,12 +29,15 @@ function mountNavSlot(): HTMLElement {
   return slot;
 }
 
-/** matchMedia is stubbed to matches:false globally — opt this component into desktop. */
-function stubDesktop(matches: boolean) {
+/**
+ * The banner asks the phone query, so a desktop viewport is one where it does
+ * not match. `fire(true)` means "now desktop", like the old min-width stub.
+ */
+function stubDesktop(desktop: boolean) {
   const listeners: Array<(e: MediaQueryListEvent) => void> = [];
   const mql = {
-    matches,
-    media: '(min-width: 768px)',
+    matches: !desktop,
+    media: PHONE_QUERY,
     onchange: null,
     addListener: vi.fn(),
     removeListener: vi.fn(),
@@ -42,7 +46,7 @@ function stubDesktop(matches: boolean) {
     dispatchEvent: vi.fn(() => true),
   };
   window.matchMedia = vi.fn(() => mql) as unknown as typeof window.matchMedia;
-  return { mql, fire: (m: boolean) => listeners.forEach(cb => cb({ matches: m } as MediaQueryListEvent)) };
+  return { mql, fire: (desktopNow: boolean) => listeners.forEach(cb => cb({ matches: !desktopNow } as MediaQueryListEvent)) };
 }
 
 const originalMatchMedia = window.matchMedia;

client/src/components/Planner/TripWarningsBanner.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom'
 import { AlertTriangle, Info, AlertCircle } from 'lucide-react'
 import { pluginsApi } from '../../api/client'
 import { usePluginStore } from '../../store/pluginStore'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 /**
  * Shows validation/warning contributions from `warningProvider` plugins (#1429).
@@ -25,9 +26,7 @@ const STYLE = {
 export default function TripWarningsBanner({ tripId, onOpenPluginTab }: { tripId: number; onOpenPluginTab?: (pluginId: string) => void }) {
   const [warnings, setWarnings] = useState<Warning[]>([])
   const [navSlot, setNavSlot] = useState<HTMLElement | null>(null)
-  const [isDesktop, setIsDesktop] = useState(
-    () => typeof window !== 'undefined' && (window.matchMedia?.('(min-width: 768px)')?.matches ?? true)
-  )
+  const isDesktop = !useIsPhone()
   const plugins = usePluginStore((s) => s.plugins)
 
   useEffect(() => {
@@ -42,13 +41,6 @@ export default function TripWarningsBanner({ tripId, onOpenPluginTab }: { tripId
   // The navbar renders in the same commit as the planner, so the slot exists by
   // the time effects run; it is display:none'd with the navbar below md.
   useEffect(() => { setNavSlot(document.getElementById('trek-nav-center-slot')) }, [])
-  useEffect(() => {
-    const mq = window.matchMedia?.('(min-width: 768px)')
-    if (!mq) return
-    const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
 
   if (warnings.length === 0) return null
 

client/src/components/Planner/transitDisplay.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Footprints, MoveRight, type LucideIcon } from 'lucide-react'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 /**
  * Shared display bits for public-transit entries (#1065) — the timeline row,
@@ -33,7 +34,7 @@ export function TransitWalkDivider({ leg, t, size = 'md' }: {
   size?: 'sm' | 'md'
 }) {
   const mins = leg.duration ? Math.round(leg.duration / 60) : null
-  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
+  const isMobile = useIsPhone()
   // Hairlines that fade towards the outer edges — strongest next to the text.
   const rule = (dir: 'left' | 'right'): React.CSSProperties => ({
     flex: 1, height: 1, minWidth: 12, borderRadius: 1,

client/src/components/Todo/useTodoList.ts

@@ -8,6 +8,7 @@ import { formatDate as fmtDate } from '../../utils/formatters'
 import type { TodoItem } from '../../types'
 import { localToday } from '../Planner/today'
 import type { FilterType, Member } from './todoListModel'
+import { useIsPhone } from '../../mobile/useIsPhone'
 
 /**
  * Todo list logic — store actions, member load, the filter/selection/add-new
@@ -24,13 +25,7 @@ export function useTodoList(tripId: number, items: TodoItem[], addItemSignal: nu
   const { t, locale } = useTranslation()
   const formatDate = (d: string) => fmtDate(d, locale) || d
 
-  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 767px)')
-    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches)
-    mq.addEventListener('change', handler)
-    return () => mq.removeEventListener('change', handler)
-  }, [])
+  const isMobile = useIsPhone()
 
   const [filter, setFilter] = useState<FilterType>('all')
   const [selectedId, setSelectedId] = useState<number | null>(null)

client/src/components/shared/dialogFocus.ts

@@ -1,4 +1,5 @@
 import type { KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { isPhoneViewport } from '../../mobile/useIsPhone'
 
 /**
  * Keyboard focus for the app's dialogs (#1302): the first Tab lands in the dialog
@@ -39,7 +40,7 @@ export function firstTextField(panel: HTMLElement): HTMLElement | null {
 /** Only with a mouse or trackpad: on a phone a focused field would throw the keyboard up. */
 function typingDevice(): boolean {
   if (typeof window.matchMedia !== 'function') return false
-  return window.matchMedia('(pointer: fine)').matches && !window.matchMedia('(max-width: 767px)').matches
+  return window.matchMedia('(pointer: fine)').matches && !isPhoneViewport()
 }
 
 /**