diff --git a/src/components/settings/account-section.tsx b/src/components/settings/account-section.tsx index 901b2d335..8846b24fe 100644 --- a/src/components/settings/account-section.tsx +++ b/src/components/settings/account-section.tsx @@ -568,8 +568,15 @@ function PasskeyListSection({ isAuthenticated }: { isAuthenticated: boolean }) {

{t("settings.passkeysDescription")}

-
- + {/* Phase A5 / B-mobile HIGH: the passkey table previously + rendered with `min-w-[620px]` inside `overflow-x-auto`, + which on a 393px viewport hid the right-most column — + including the destructive delete action. Render the desktop + table only at `≥ md`, and at `< md` paint a card-list where + every passkey's name, device type, backup status, created + date, and delete action are all visible without scrolling. */} +
+
@@ -618,6 +625,7 @@ function PasskeyListSection({ isAuthenticated }: { isAuthenticated: boolean }) { size="icon" className="text-destructive h-8 w-8" disabled={deletePasskey.isPending} + aria-label={t("settings.deletePasskey")} > @@ -650,6 +658,77 @@ function PasskeyListSection({ isAuthenticated }: { isAuthenticated: boolean }) {
+ + {/* Mobile card list — < md only. Each passkey gets its own + card so the delete action stays visible and tap-targetable + (44px) without the user having to horizontally scroll + through a wide table. */} + {deleteMsg && (