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/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()
 }
 
 /**