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/src/lib/breakpoints.ts

@@ -0,0 +1,5 @@
+// Width below which the app uses its phone layout; the same value as Tailwind's sm (tailwind.config.js)
+// and the media queries in index.css.
+export const PHONE_MAX_WIDTH = 768;
+
+export const isPhoneWidth = (): boolean => typeof window !== 'undefined' && window.innerWidth < PHONE_MAX_WIDTH;