Mail: a smartphone layout

Below 768px (or a touch screen under 500px tall) the mail view becomes one
column at a time: the list full screen, with a menu button beside the search
box that slides the sidebar in as a 70%-wide drawer (tap outside, pick a
folder or press Esc to close), and a floating compose button. Opening a
conversation or a draft shows the reading pane full screen with a back
arrow; composers, including reply/reply-all/forward, open full screen.

List rows stack sender/date, subject and snippet; tapping an avatar selects
a row and the bulk actions sit above the list. The app switcher, Settings
link, select-all box, resizers and right panel are hidden on a phone, and
the composer header drops the Attach label and pop-out at phone width.

Everything is gated on useIsMobile(); the desktop layout renders as before
(checked by screenshot comparison at 1440x900).

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

frontend/src/i18n/en.ts

@@ -68,6 +68,7 @@ export const en = {
 
   "mail.noConversations": "No conversations.",
   "mail.me": "me",
+  "nav.menu": "Menu",
   "mail.selectConversation": "Select a conversation.",
   "mail.loadingThread": "Loading thread…",
   "mail.expandAll": "Expand all",