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/index.css

@@ -563,7 +563,7 @@ body {
   --epr-dark-category-icon-active-color: var(--accent-primary);
 }
 
-@media (max-width: 639px) {
+@media (max-width: 767px) {
   /* Prevent iOS auto-zoom on input focus */
   .mindsift-emoji-picker .EmojiPickerReact input.epr-search-input {
     font-size: 1rem !important;
@@ -584,7 +584,7 @@ body {
   }
 }
 
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   /* Desktop: compact like a context menu, in step with the app's small type (the sprite of the category
      icons scales with its size variable) */
   .mindsift-emoji-picker .EmojiPickerReact {
@@ -630,7 +630,7 @@ fieldset:disabled :is(button, input, select, textarea) {
   --outline-indent: 14px;
   --outline-min-text: 14rem;
 }
-@media (min-width: 640px) {
+@media (min-width: 768px) {
   :root {
     --outline-indent: 22px;
     --outline-min-text: 0px;