Interface size setting: Default, +10%, +20%

Mailbox display and Settings → Appearance get an interface-size picker,
stored per device in localStorage and applied as CSS zoom on <html>.
Viewport-height layouts divide by --ui-zoom, and code that turns mouse
coordinates or bounding rects into CSS lengths (resizers, compose dock,
emoji picker, editor popups and image handles, swipe-to-delete) divides
by the zoom factor.

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

frontend/src/components/mail/UiScaleOption.tsx

@@ -0,0 +1,30 @@
+import { useT } from "../../i18n";
+import { setUiScale, UI_SCALES, useUiScale } from "../../lib/uiScale";
+
+/** "Interface size" — Default / +10% / +20%, in the ⋯ menu's Mailbox display
+ *  and in Settings → Appearance. Applies at once. */
+export function UiScaleOption() {
+  const t = useT();
+  const scale = useUiScale();
+  return (
+    <div className="flex items-center justify-between gap-3 text-[14px] text-app-fg">
+      <span>{t("display.size")}</span>
+      <div role="radiogroup" aria-label={t("display.size")} className="flex gap-1 rounded-lg border border-app-border p-0.5">
+        {UI_SCALES.map((value) => (
+          <button
+            key={value}
+            type="button"
+            role="radio"
+            aria-checked={scale === value}
+            onClick={() => setUiScale(value)}
+            className={`rounded px-2.5 py-0.5 ${
+              scale === value ? "bg-app-active font-medium text-app-fg" : "text-app-muted hover:bg-app-hover"
+            }`}
+          >
+            {value === 1 ? t("display.sizeDefault") : `+${Math.round((value - 1) * 100)}%`}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}