lukasandClaude Opus 5.5
a4581ab199
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>
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
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>
|
|
);
|
|
}
|