feat(ui): InlineAction for small text actions, with a 44 px touch floor

Thirty-three hand-rolled underlined text links and buttons (Open
schedule, Select all, View all, Retry, Learn more, the device-code copy
action, ...) carried three different focus rings, none on half of them,
and a 16 px target on a phone. They now render through one InlineAction
primitive: tone primary / muted / foreground, size xs / sm, a focus ring,
and min-h-11 on a coarse pointer so the desktop layout does not move. A
structural test refuses a new hand-rolled copy.
This commit is contained in:
Marc-André Bombeck committed 2026-10-20 13:03:15 +02:00
1 parent ce8074ad08
commit 60be63bcd1
33 files changed
+484 -222

No files matched your search

@@ -46,6 +46,7 @@ import {
type ExistingFactorProof,
type ReauthMethod,
} from "./existing-factor-reauth-dialog";
import { InlineAction } from "@/components/ui/inline-action";
interface SetupData {
otpauthUri: string;
@@ -430,13 +431,9 @@ export function TotpCard({
{t("settings.security.totp.verify")}
</Button>
</div>
<button
type="button"
onClick={resetWizard}
className="text-muted-foreground hover:text-foreground text-xs"
>
<InlineAction tone="muted" onClick={resetWizard}>
{t("common.cancel")}
</button>
</InlineAction>
</form>
</div>
)}
@@ -564,9 +561,8 @@ export function TotpCard({
}
className="font-mono"
/>
<button
type="button"
className="text-muted-foreground hover:text-foreground text-xs"
<InlineAction
tone="muted"
onClick={() =>
setDisableMethod((m) =>
m === "totp" ? "recovery" : "totp",
@@ -576,7 +572,7 @@ export function TotpCard({
{disableMethod === "totp"
? t("settings.security.useRecoveryCode")
: t("settings.security.useAuthenticator")}
</button>
</InlineAction>
</div>
<AlertDialogFooter>
<AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>