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/components/compose/Composer.tsx

@@ -619,7 +619,8 @@ export function Composer({
             <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
               <path d="M12.5 6.5l-5.2 5.2a2.5 2.5 0 0 1-3.5-3.5l5.4-5.4a1.6 1.6 0 0 1 2.3 2.3l-5.3 5.3a0.8 0.8 0 0 1-1.1-1.1l4.9-4.9" />
             </svg>
-            {t("compose.attach")}
+            {/* Phone width: the paperclip alone, so the close button still fits. */}
+            <span className="max-md:hidden">{t("compose.attach")}</span>
           </HeaderButton>
           <input
             ref={fileInputRef}
@@ -713,11 +714,14 @@ export function Composer({
             </HeaderButton>
           )}
           {!fullWindow && (
+            // No second browser window to pop out into on a phone.
+            <div className="contents max-md:hidden">
             <HeaderButton onClick={popOut} title={t("compose.popOut")}>
               <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
                 <path d="M6 3H3v10h10v-3M9 3h4v4M13 3L7 9" />
               </svg>
             </HeaderButton>
+            </div>
           )}
           <HeaderButton onClick={requestClose} title={t("common.close")}>
             <svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round">