feat(ui): phone layout up to 768 px

Phones in landscape and small tablets (iPad mini upright) got the
desktop layout from 640 px. The sm breakpoint is now 768 px; the media
queries in index.css and the width checks in code (isPhoneWidth) follow
it. The desktop header grid applies from sm.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/tailwind.config.js

@@ -12,6 +12,16 @@ export default {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
   darkMode: 'class',
   theme: {
+    // Phone layout below sm, desktop from sm (see AGENTS.md). sm is 768 px, not Tailwind's 640, so phones in
+    // landscape and small tablets (iPad mini upright) get the touch layout too; keep PHONE_MAX_WIDTH in
+    // src/lib/breakpoints.ts and the media queries in index.css in step.
+    screens: {
+      sm: '768px',
+      md: '768px',
+      lg: '1024px',
+      xl: '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       colors: {
         canvas: v('--bg-app'),