From 34e30392ac2aa3a5622fbb814e266a8fcdcc8b9f Mon Sep 17 00:00:00 2001
From: qdzsh <github@qdzsh.dev>
Date: Sun, 21 Jun 2026 20:59:01 +0700
Subject: [PATCH 1/4] fix(ui): stabilize account layout and API key dialog

---
 frontend/src/components/ui/dialog.tsx         | 32 +++++++++
 .../accounts/components/account-actions.tsx   |  9 +--
 .../accounts/components/account-detail.tsx    |  4 +-
 .../accounts/components/account-list-item.tsx | 12 ++--
 .../accounts/components/account-list.tsx      | 13 ++--
 .../components/account-proxy-binding.tsx      |  9 +--
 .../components/account-token-info.tsx         | 12 ++--
 .../components/account-usage-panel.tsx        | 10 +--
 .../components/accounts-page.test.tsx         | 43 +++++++++++
 .../accounts/components/accounts-page.tsx     | 10 ++-
 .../accounts/components/accounts-skeleton.tsx |  8 +--
 .../components/api-key-edit-dialog.test.tsx   | 52 ++++++++++++++
 .../proposal.md                               | 25 +++++++
 .../specs/frontend-architecture/spec.md       | 72 +++++++++++++++++++
 .../tasks.md                                  | 15 ++++
 15 files changed, 288 insertions(+), 38 deletions(-)
 create mode 100644 openspec/changes/fix-dashboard-responsive-select-dismissal/proposal.md
 create mode 100644 openspec/changes/fix-dashboard-responsive-select-dismissal/specs/frontend-architecture/spec.md
 create mode 100644 openspec/changes/fix-dashboard-responsive-select-dismissal/tasks.md

diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index c9cc95bd1..b29b08810 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -47,10 +47,24 @@ function DialogOverlay({
   )
 }
 
+const FLOATING_LAYER_SELECTOR = [
+  "[data-slot='select-content']",
+  "[data-slot='dropdown-menu-content']",
+  "[data-slot='dropdown-menu-sub-content']",
+  "[data-slot='popover-content']",
+].join(", ")
+
+function isFloatingLayerTarget(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest(FLOATING_LAYER_SELECTOR) !== null
+}
+
 function DialogContent({
   className,
   children,
   showCloseButton = true,
+  onFocusOutside,
+  onInteractOutside,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
@@ -64,6 +78,24 @@ function DialogContent({
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 overflow-hidden rounded-lg border p-6 shadow-lg duration-200 outline-none overscroll-contain sm:max-w-lg",
           className
         )}
+        onFocusOutside={(event) => {
+          onFocusOutside?.(event)
+          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+            event.preventDefault()
+          }
+        }}
+        onInteractOutside={(event) => {
+          onInteractOutside?.(event)
+          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+            event.preventDefault()
+          }
+        }}
+        onPointerDownOutside={(event) => {
+          onPointerDownOutside?.(event)
+          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+            event.preventDefault()
+          }
+        }}
         {...props}
       >
         {children}
diff --git a/frontend/src/features/accounts/components/account-actions.tsx b/frontend/src/features/accounts/components/account-actions.tsx
index 6092b0ea8..866f433f3 100644
--- a/frontend/src/features/accounts/components/account-actions.tsx
+++ b/frontend/src/features/accounts/components/account-actions.tsx
@@ -64,8 +64,8 @@ export function AccountActions({
   return (
     <div className="space-y-3 border-t pt-4">
       {!showOperatorRecoveryAction ? (
-        <div className="flex flex-wrap items-center gap-3 rounded-md border bg-muted/30 p-3">
-          <div className="flex min-w-36 items-center gap-2 text-sm font-medium">
+        <div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3 sm:flex-row sm:items-center sm:gap-3">
+          <div className="flex min-w-0 items-center gap-2 text-sm font-medium sm:min-w-36">
             <Route className="h-4 w-4 text-muted-foreground" />
             Routing policy
           </div>
@@ -82,7 +82,7 @@ export function AccountActions({
             <SelectTrigger
               aria-label="Routing policy"
               size="sm"
-              className="h-8 min-w-32 flex-1 text-xs"
+              className="h-8 w-full min-w-0 text-xs sm:min-w-32 sm:flex-1"
             >
               <SelectValue />
             </SelectTrigger>
@@ -97,7 +97,7 @@ export function AccountActions({
 
       <label
         htmlFor={`security-work-authorized-${account.accountId}`}
-        className="flex items-center justify-between gap-3 rounded-md border px-3 py-2"
+        className="flex min-w-0 items-center justify-between gap-3 rounded-md border px-3 py-2"
       >
         <span className="flex min-w-0 items-center gap-2 text-xs font-medium">
           <ShieldCheck className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
@@ -105,6 +105,7 @@ export function AccountActions({
         </span>
         <Switch
           id={`security-work-authorized-${account.accountId}`}
+          className="shrink-0"
           checked={account.securityWorkAuthorized ?? false}
           disabled={busy || readOnly}
           onCheckedChange={(checked) =>
diff --git a/frontend/src/features/accounts/components/account-detail.tsx b/frontend/src/features/accounts/components/account-detail.tsx
index f1e704cfb..d63d7a64b 100644
--- a/frontend/src/features/accounts/components/account-detail.tsx
+++ b/frontend/src/features/accounts/components/account-detail.tsx
@@ -93,7 +93,7 @@ export function AccountDetail({
   return (
     <div
       key={account.accountId}
-      className="animate-fade-in-up space-y-4 rounded-xl border bg-card p-5"
+      className="animate-fade-in-up min-w-0 space-y-4 rounded-xl border bg-card p-4 sm:p-5"
     >
       {/* Account header */}
       <div>
@@ -245,7 +245,7 @@ function AccountNameField({
   }
 
   return (
-    <div className="flex items-center gap-1.5">
+    <div className="flex min-w-0 items-center gap-1.5">
       <h2 className="min-w-0 truncate text-base font-semibold">
         {labelIsEmail ? (
           <>
diff --git a/frontend/src/features/accounts/components/account-list-item.tsx b/frontend/src/features/accounts/components/account-list-item.tsx
index 3bb3c64c6..843ffe818 100644
--- a/frontend/src/features/accounts/components/account-list-item.tsx
+++ b/frontend/src/features/accounts/components/account-list-item.tsx
@@ -78,11 +78,11 @@ export function AccountListItem({
       type="button"
       onClick={() => onSelect(account.accountId)}
       className={cn(
-        "w-full rounded-lg px-3 py-2.5 text-left transition-colors",
+        "min-w-0 w-full rounded-lg px-3 py-2.5 text-left transition-colors",
         selected ? "bg-primary/8 ring-1 ring-primary/25" : "hover:bg-muted/50",
       )}
     >
-      <div className="flex items-center gap-2.5">
+      <div className="flex items-start gap-2.5">
         <div className="min-w-0 flex-1">
           <p className="truncate text-sm font-medium">
             {titleIsEmail && blurred ? (
@@ -111,7 +111,7 @@ export function AccountListItem({
       <div
         className={cn(
           "mt-2 grid gap-2",
-          visibleQuotaRows > 1 ? "grid-cols-2" : "grid-cols-1",
+          visibleQuotaRows > 1 ? "grid-cols-1 sm:grid-cols-2" : "grid-cols-1",
         )}
       >
         {showMonthlyRow ? (
@@ -136,9 +136,9 @@ export function AccountListItem({
           />
         ) : null}
       </div>
-      <div className="mt-2 flex items-center justify-between gap-2 text-[10px] text-muted-foreground">
-        <span>{warmupLabel}</span>
-        <span className="truncate">{warmupMeta}</span>
+      <div className="mt-2 flex min-w-0 items-center justify-between gap-2 text-[10px] text-muted-foreground">
+        <span className="shrink-0">{warmupLabel}</span>
+        <span className="min-w-0 truncate">{warmupMeta}</span>
       </div>
     </button>
   );
diff --git a/frontend/src/features/accounts/components/account-list.tsx b/frontend/src/features/accounts/components/account-list.tsx
index f200da4d2..81c4dbf38 100644
--- a/frontend/src/features/accounts/components/account-list.tsx
+++ b/frontend/src/features/accounts/components/account-list.tsx
@@ -73,9 +73,9 @@ export function AccountList({
   }, [accounts, quotaDisplay, search, statusFilter, activeSortMode]);
 
   return (
-    <div className="space-y-3">
-      <div className="grid grid-cols-2 gap-2">
-        <div className="relative col-span-2 min-w-0">
+    <div className="min-w-0 space-y-3">
+      <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+        <div className="relative min-w-0 sm:col-span-2">
           <Search className="pointer-events-none absolute top-1/2 left-2.5 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground/60" aria-hidden />
           <Input
             placeholder="Search accounts..."
@@ -121,7 +121,7 @@ export function AccountList({
         </Select>
       </div>
 
-      <div className="flex items-center justify-between gap-3">
+      <div className="flex flex-wrap items-center justify-between gap-3">
         <Button
           type="button"
           variant="link"
@@ -146,7 +146,10 @@ export function AccountList({
 
       {helpOpen ? <WindowsOauthHelp /> : null}
 
-      <div className="max-h-[calc(100vh-16rem)] space-y-1 overflow-y-auto p-1" data-testid="account-list-scroll-region">
+      <div
+        className="max-h-[min(32rem,calc(100dvh-16rem))] space-y-1 overflow-y-auto p-1"
+        data-testid="account-list-scroll-region"
+      >
         {filtered.length === 0 ? (
           <div className="flex flex-col items-center gap-2 rounded-lg border border-dashed p-6 text-center">
             <p className="text-sm font-medium text-muted-foreground">No matching accounts</p>
diff --git a/frontend/src/features/accounts/components/account-proxy-binding.tsx b/frontend/src/features/accounts/components/account-proxy-binding.tsx
index dfc7294b4..a96357165 100644
--- a/frontend/src/features/accounts/components/account-proxy-binding.tsx
+++ b/frontend/src/features/accounts/components/account-proxy-binding.tsx
@@ -28,13 +28,13 @@ export function AccountProxyBinding({ account, admin, busy, readOnly = false, on
   }
 
   return (
-    <section className="rounded-lg border bg-muted/30 p-4">
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-center gap-2.5">
+    <section className="min-w-0 rounded-lg border bg-muted/30 p-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
+        <div className="flex min-w-0 items-center gap-2.5">
           <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
             <Network className="h-4 w-4 text-primary" aria-hidden="true" />
           </div>
-          <div>
+          <div className="min-w-0">
             <h3 className="text-sm font-semibold">Account proxy binding</h3>
             <p className="text-xs text-muted-foreground">
               Route this account's ChatGPT upstream traffic through a specific proxy pool.
@@ -43,6 +43,7 @@ export function AccountProxyBinding({ account, admin, busy, readOnly = false, on
         </div>
         <Switch
           aria-label="Enable account proxy binding"
+          className="shrink-0"
           checked={active}
           disabled={busy || readOnly || !binding}
           onCheckedChange={(checked) => {
diff --git a/frontend/src/features/accounts/components/account-token-info.tsx b/frontend/src/features/accounts/components/account-token-info.tsx
index 54165c6ac..dc046d615 100644
--- a/frontend/src/features/accounts/components/account-token-info.tsx
+++ b/frontend/src/features/accounts/components/account-token-info.tsx
@@ -14,17 +14,17 @@ export function AccountTokenInfo({ account }: AccountTokenInfoProps) {
     <div className="space-y-3 rounded-lg border bg-muted/30 p-4">
       <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Token Status</h3>
       <dl className="space-y-2 text-xs">
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center justify-between gap-2">
           <dt className="text-muted-foreground">Access</dt>
-          <dd className="font-medium">{formatAccessTokenLabel(account.auth)}</dd>
+          <dd className="min-w-0 break-words text-right font-medium">{formatAccessTokenLabel(account.auth)}</dd>
         </div>
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center justify-between gap-2">
           <dt className="text-muted-foreground">Refresh</dt>
-          <dd className="font-medium">{formatRefreshTokenLabel(account.auth)}</dd>
+          <dd className="min-w-0 break-words text-right font-medium">{formatRefreshTokenLabel(account.auth)}</dd>
         </div>
-        <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center justify-between gap-2">
           <dt className="text-muted-foreground">ID token</dt>
-          <dd className="font-medium">{formatIdTokenLabel(account.auth)}</dd>
+          <dd className="min-w-0 break-words text-right font-medium">{formatIdTokenLabel(account.auth)}</dd>
         </div>
       </dl>
     </div>
diff --git a/frontend/src/features/accounts/components/account-usage-panel.tsx b/frontend/src/features/accounts/components/account-usage-panel.tsx
index c864cf3c2..3553bacd2 100644
--- a/frontend/src/features/accounts/components/account-usage-panel.tsx
+++ b/frontend/src/features/accounts/components/account-usage-panel.tsx
@@ -153,9 +153,9 @@ export function AccountUsagePanel({ account, trends }: AccountUsagePanelProps) {
     primaryTrendPoints.length > 0 || secondaryTrendPoints.length > 0 || secondaryScheduledTrendPoints.length > 0;
 
   return (
-    <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
+    <div className="min-w-0 space-y-4 rounded-lg border bg-muted/30 p-4">
       <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Usage</h3>
-      <div className={cn("grid gap-4", weeklyOnly || monthlyOnly ? "grid-cols-1" : "grid-cols-2")}>
+      <div className={cn("grid gap-4", weeklyOnly || monthlyOnly ? "grid-cols-1" : "grid-cols-1 sm:grid-cols-2")}>
         {monthlyOnly ? (
           <QuotaRow label="Monthly" percent={monthly} resetAt={account.resetAtMonthly} />
         ) : (
@@ -168,7 +168,7 @@ export function AccountUsagePanel({ account, trends }: AccountUsagePanelProps) {
       <div className="rounded-md border bg-background/60 px-3 py-2">
         <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Request logs total</p>
         {hasRequestUsage ? (
-          <p className="mt-1 text-xs tabular-nums text-muted-foreground">
+          <p className="mt-1 break-words text-xs tabular-nums text-muted-foreground">
             {formatCompactNumber(requestUsage?.totalTokens)} tok | {formatCompactNumber(requestUsage?.cachedInputTokens)} cached |{" "}
             {formatCompactNumber(requestUsage?.requestCount)} req | {formatCurrency(requestUsage?.totalCostUsd)}
           </p>
@@ -212,9 +212,9 @@ export function AccountUsagePanel({ account, trends }: AccountUsagePanelProps) {
       ) : null}
       {hasTrends && (
         <div className="pt-3">
-          <div className="mb-2 flex items-center justify-between">
+          <div className="mb-2 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <h4 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">7-day trend</h4>
-            <div className="flex items-center gap-3 text-[10px] text-muted-foreground">
+            <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground">
               <span className="flex items-center gap-1.5">
                 <span className="inline-block h-2 w-2 rounded-full bg-chart-1" />
                 5h
diff --git a/frontend/src/features/accounts/components/accounts-page.test.tsx b/frontend/src/features/accounts/components/accounts-page.test.tsx
index 650495d99..b7c253110 100644
--- a/frontend/src/features/accounts/components/accounts-page.test.tsx
+++ b/frontend/src/features/accounts/components/accounts-page.test.tsx
@@ -128,4 +128,47 @@ describe("AccountsPage", () => {
       screen.getByRole("heading", { name: "Visible First" }),
     ).toBeInTheDocument();
   });
+
+  it("renders account panels with mobile-first responsive containment", () => {
+    mockedUseAccounts.mockReturnValue({
+      accountsQuery: {
+        data: [
+          account({
+            accountId: "acc-long",
+            email: "very.long.account.identity.for.mobile@example-enterprise-workspace.invalid",
+            displayName: "very.long.account.identity.for.mobile@example-enterprise-workspace.invalid",
+          }),
+        ],
+        error: null,
+        refetch: vi.fn(),
+      },
+      importMutation: idleMutation(),
+      pauseMutation: idleMutation(),
+      resumeMutation: idleMutation(),
+      probeMutation: idleMutation(),
+      deleteMutation: idleMutation(),
+      exportAuthMutation: idleMutation(),
+      setAliasMutation: idleMutation(),
+      limitWarmupMutation: idleMutation(),
+      routingPolicyMutation: idleMutation(),
+      updateMutation: idleMutation(),
+    } as unknown as ReturnType<typeof useAccounts>);
+
+    render(
+      <MemoryRouter>
+        <AccountsPage />
+      </MemoryRouter>,
+    );
+
+    expect(screen.getByTestId("accounts-layout")).toHaveClass(
+      "grid-cols-1",
+      "min-w-0",
+      "lg:grid-cols-[minmax(18rem,22rem)_minmax(0,1fr)]",
+    );
+    expect(screen.getByTestId("accounts-list-panel")).toHaveClass("min-w-0");
+    expect(screen.getByRole("heading", { name: /very\.long\.account/i })).toHaveClass(
+      "min-w-0",
+      "truncate",
+    );
+  });
 });
diff --git a/frontend/src/features/accounts/components/accounts-page.tsx b/frontend/src/features/accounts/components/accounts-page.tsx
index f1d5b293c..4e9da59a0 100644
--- a/frontend/src/features/accounts/components/accounts-page.tsx
+++ b/frontend/src/features/accounts/components/accounts-page.tsx
@@ -143,8 +143,14 @@ export function AccountsPage() {
       {!accountsQuery.data ? (
         <AccountsSkeleton />
       ) : (
-        <div className="grid gap-4 lg:grid-cols-[22rem_minmax(0,1fr)]">
-          <div className="rounded-xl border bg-card p-4">
+        <div
+          data-testid="accounts-layout"
+          className="grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-[minmax(18rem,22rem)_minmax(0,1fr)]"
+        >
+          <div
+            data-testid="accounts-list-panel"
+            className="min-w-0 rounded-xl border bg-card p-3 sm:p-4"
+          >
             <AccountList
               accounts={accounts}
               selectedAccountId={resolvedSelectedAccountId}
diff --git a/frontend/src/features/accounts/components/accounts-skeleton.tsx b/frontend/src/features/accounts/components/accounts-skeleton.tsx
index 126fb4e10..92b0a6071 100644
--- a/frontend/src/features/accounts/components/accounts-skeleton.tsx
+++ b/frontend/src/features/accounts/components/accounts-skeleton.tsx
@@ -2,9 +2,9 @@ import { Skeleton } from "@/components/ui/skeleton";
 
 export function AccountsSkeleton() {
   return (
-    <div className="grid gap-4 lg:grid-cols-[22rem_minmax(0,1fr)]">
+    <div className="grid min-w-0 grid-cols-1 gap-4 lg:grid-cols-[minmax(18rem,22rem)_minmax(0,1fr)]">
       {/* Left: account list */}
-      <div className="rounded-xl border bg-card p-4 space-y-3">
+      <div className="min-w-0 rounded-xl border bg-card p-3 space-y-3 sm:p-4">
         <div className="flex items-center gap-2">
           <Skeleton className="h-8 flex-1 rounded-md" />
           <Skeleton className="h-8 w-32 rounded-md" />
@@ -25,7 +25,7 @@ export function AccountsSkeleton() {
       </div>
 
       {/* Right: account detail */}
-      <div className="rounded-xl border bg-card p-5 space-y-4">
+      <div className="min-w-0 rounded-xl border bg-card p-4 space-y-4 sm:p-5">
         <div className="space-y-1.5">
           <Skeleton className="h-5 w-40" />
           <Skeleton className="h-3 w-48" />
@@ -35,7 +35,7 @@ export function AccountsSkeleton() {
         <div className="space-y-4 rounded-lg border bg-muted/30 p-4">
           <Skeleton className="h-3 w-12" />
           {/* Quota rows - horizontal 2 columns */}
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
             {Array.from({ length: 2 }).map((_, i) => (
               <div key={i} className="space-y-1.5">
                 <div className="flex items-center justify-between">
diff --git a/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx b/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
index 4b2227fe2..518edee14 100644
--- a/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
+++ b/frontend/src/features/api-keys/components/api-key-edit-dialog.test.tsx
@@ -1,6 +1,7 @@
 import { screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { HttpResponse, http } from "msw";
+import { useState } from "react";
 import { describe, expect, it, vi } from "vitest";
 
 import type { LimitRuleCreate } from "@/features/api-keys/schemas";
@@ -12,6 +13,23 @@ import { ApiKeyEditDialog } from "./api-key-edit-dialog";
 import { hasLimitRuleChanges } from "./limit-rules-utils";
 
 describe("ApiKeyEditDialog", () => {
+  function ControlledApiKeyEditDialog({
+    apiKey = createApiKey({ allowedModels: [] }),
+  }: {
+    apiKey?: ReturnType<typeof createApiKey>;
+  }) {
+    const [open, setOpen] = useState(true);
+    return (
+      <ApiKeyEditDialog
+        open={open}
+        busy={false}
+        apiKey={apiKey}
+        onOpenChange={setOpen}
+        onSubmit={vi.fn().mockResolvedValue(undefined)}
+      />
+    );
+  }
+
   it("omits limits from payload when only name changes", async () => {
     const user = userEvent.setup();
     const onSubmit = vi.fn().mockResolvedValue(undefined);
@@ -179,6 +197,40 @@ describe("ApiKeyEditDialog", () => {
     expect(payload.assignedAccountIds).toEqual(["acc_primary", "acc_secondary"]);
   });
 
+  it("keeps the dialog open when selecting portalled model and account menu items", async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get("/api/accounts", () =>
+        HttpResponse.json({
+          accounts: [
+            createAccountSummary(),
+            createAccountSummary({
+              accountId: "acc_secondary",
+              email: "secondary@example.com",
+              displayName: "secondary@example.com",
+            }),
+          ],
+        }),
+      ),
+    );
+
+    renderWithProviders(<ControlledApiKeyEditDialog />);
+
+    await user.click(await screen.findByRole("button", { name: "All models" }));
+    await user.click(await screen.findByRole("menuitemcheckbox", { name: "gpt-5.1" }));
+    await user.keyboard("{Escape}");
+
+    expect(await screen.findByRole("dialog", { name: "Edit API key" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "1 model selected" })).toBeInTheDocument();
+
+    await user.click(await screen.findByRole("button", { name: "All accounts" }));
+    await user.click(await screen.findByRole("menuitemcheckbox", { name: /primary@example\.com/i }));
+    await user.keyboard("{Escape}");
+
+    expect(await screen.findByRole("dialog", { name: "Edit API key" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "1 account selected" })).toBeInTheDocument();
+  });
+
   it("omits assigned accounts when editing an unrelated field", async () => {
     const user = userEvent.setup();
     const onSubmit = vi.fn().mockResolvedValue(undefined);
diff --git a/openspec/changes/fix-dashboard-responsive-select-dismissal/proposal.md b/openspec/changes/fix-dashboard-responsive-select-dismissal/proposal.md
new file mode 100644
index 000000000..ab51a2dff
--- /dev/null
+++ b/openspec/changes/fix-dashboard-responsive-select-dismissal/proposal.md
@@ -0,0 +1,25 @@
+## Why
+
+The Accounts page does not adapt cleanly on narrow viewports, which makes the
+list/detail layout and dense account controls hard to use on mobile-sized
+screens.
+
+The API key edit dialog also closes when an operator chooses items from
+portalled select menus and then clicks away to save, because the dialog treats
+select-menu interaction as an outside click.
+
+## What Changes
+
+- Tighten Accounts page responsive layout constraints so the list and detail
+  panels fit mobile and tablet widths without horizontal overflow.
+- Keep account list controls, quota rows, detail sections, and action controls
+  usable at narrow widths.
+- Prevent API key edit dialog dismissal for interactions inside portalled
+  select/popover/calendar menu surfaces while preserving normal outside-click
+  dismissal.
+- Add focused frontend regression coverage for both issues.
+
+## Impact
+
+Operators can manage accounts and edit API keys reliably across desktop and
+mobile-sized dashboard viewports.
diff --git a/openspec/changes/fix-dashboard-responsive-select-dismissal/specs/frontend-architecture/spec.md b/openspec/changes/fix-dashboard-responsive-select-dismissal/specs/frontend-architecture/spec.md
new file mode 100644
index 000000000..ed1d5f7b7
--- /dev/null
+++ b/openspec/changes/fix-dashboard-responsive-select-dismissal/specs/frontend-architecture/spec.md
@@ -0,0 +1,72 @@
+## MODIFIED Requirements
+
+### Requirement: Accounts page
+
+The Accounts page SHALL display a responsive account-management layout with a
+searchable account list, import/add-account controls, and selected account
+details including usage, token info, proxy binding, and account actions. The
+layout SHALL fit mobile, tablet, and desktop dashboard widths without
+horizontal page overflow caused by fixed-width account controls.
+
+The Accounts page SHALL keep the add account button outside the scrollable
+account list so it remains reachable without scrolling through existing
+accounts.
+
+The Accounts page SHALL also allow exporting a selected account as an
+OpenCode-compatible `auth.json` payload with explicit raw-token warnings.
+
+#### Scenario: Responsive account management layout
+
+- **WHEN** the Accounts page is rendered at a mobile-width viewport
+- **THEN** the account list and selected account detail stack vertically
+- **AND** account list filters, quota rows, proxy controls, routing policy
+  controls, token status, and action buttons fit within the viewport without
+  horizontal document overflow
+
+#### Scenario: Account selection
+
+- **WHEN** a user clicks an account in the list
+- **THEN** the right panel shows the selected account's details
+
+#### Scenario: Account import
+
+- **WHEN** a user clicks the import button and uploads an auth.json file
+- **THEN** the app calls `POST /api/accounts/import` and refreshes the account
+  list on success
+
+#### Scenario: OAuth add account
+
+- **WHEN** a user clicks the add account button
+- **THEN** an OAuth dialog opens with browser and device code flow options
+
+#### Scenario: Add account remains outside account list scrolling
+
+- **WHEN** the Accounts page renders the account list controls
+- **THEN** the add account button is not a child of the scrollable account list
+- **AND** the button remains available without scrolling through existing
+  accounts
+
+#### Scenario: Account actions
+
+- **WHEN** a user clicks pause/resume/delete on an account
+- **THEN** the corresponding API is called and the account list is refreshed
+
+### Requirement: API key edit dialog
+
+The API key edit dialog SHALL allow operators to update restrictions and
+lifecycle settings without accidental dismissal from nested menu interactions.
+Clicking outside the dialog SHALL still dismiss the dialog when no nested
+dashboard menu surface is involved.
+
+#### Scenario: Nested select interactions do not dismiss the edit dialog
+
+- **WHEN** an operator opens the API key edit dialog
+- **AND** chooses an item from a select, model selector, account selector,
+  popover, or calendar surface rendered outside the dialog content
+- **THEN** the edit dialog remains open with the selected value preserved
+
+#### Scenario: Outside click still dismisses the edit dialog
+
+- **WHEN** an operator clicks outside the API key edit dialog and outside any
+  nested dashboard menu surface
+- **THEN** the edit dialog closes
diff --git a/openspec/changes/fix-dashboard-responsive-select-dismissal/tasks.md b/openspec/changes/fix-dashboard-responsive-select-dismissal/tasks.md
new file mode 100644
index 000000000..9410cab80
--- /dev/null
+++ b/openspec/changes/fix-dashboard-responsive-select-dismissal/tasks.md
@@ -0,0 +1,15 @@
+## 1. Frontend
+
+- [x] 1.1 Fix Accounts page layout and account detail/list components so they avoid horizontal overflow and preserve usable controls on narrow viewports.
+- [x] 1.2 Fix API key edit dialog outside-interaction handling so selecting model/account/menu items does not close the dialog.
+
+## 2. Tests
+
+- [x] 2.1 Add regression coverage for Accounts page responsive containment.
+- [x] 2.2 Add regression coverage that portalled select interactions keep the API key edit dialog open.
+
+## 3. Validation
+
+- [x] 3.1 Run focused frontend tests for the touched account/API-key components.
+- [x] 3.2 Run frontend typecheck or build.
+- [ ] 3.3 Run OpenSpec validation. (Blocked locally: `openspec` CLI is not installed in this shell.)

From 151246fe57ee300793af524856a2a8daf8152860 Mon Sep 17 00:00:00 2001
From: qdzsh <github@qdzsh.dev>
Date: Mon, 22 Jun 2026 17:00:27 +0700
Subject: [PATCH 2/4] fix(ui): keep dialog open when dismissing an open
 floating layer

The earlier dialog fix only exempted clicks landing inside a floating layer
(Select/DropdownMenu/Popover content). But the multi-select dropdowns in the
Edit API key dialog (Allowed models, Assigned accounts) use a DropdownMenu, and
dismissing them by clicking the backdrop produces an outside event whose target
is outside every layer -> the dialog closed too, so Save was unreachable.

Add a guard: while any floating layer is open (data-state=open), treat the
dialog's focus/interact/pointer-outside events as dismissing that layer, not the
dialog, and preventDefault. Also include the radix popper wrapper in the target
allowlist for robustness.
---
 frontend/src/components/ui/dialog.tsx | 30 ++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index b29b08810..86b34a773 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -52,12 +52,36 @@ const FLOATING_LAYER_SELECTOR = [
   "[data-slot='dropdown-menu-content']",
   "[data-slot='dropdown-menu-sub-content']",
   "[data-slot='popover-content']",
+  "[data-radix-popper-content-wrapper]",
+].join(", ")
+
+// Floating layers (Select / DropdownMenu / Popover) that are currently OPEN.
+// While one is open, an "outside" pointer/focus event is the user dismissing
+// that layer — not the dialog — even when the pointer lands outside every layer
+// (e.g. clicking the backdrop to close an open multi-select dropdown). The
+// layer closes itself; the dialog must stay open.
+const OPEN_FLOATING_LAYER_SELECTOR = [
+  "[data-slot='select-content'][data-state='open']",
+  "[data-slot='dropdown-menu-content'][data-state='open']",
+  "[data-slot='dropdown-menu-sub-content'][data-state='open']",
+  "[data-slot='popover-content'][data-state='open']",
 ].join(", ")
 
 function isFloatingLayerTarget(target: EventTarget | null): boolean {
   return target instanceof Element && target.closest(FLOATING_LAYER_SELECTOR) !== null
 }
 
+function isFloatingLayerOpen(): boolean {
+  return (
+    typeof document !== "undefined" &&
+    document.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null
+  )
+}
+
+function shouldIgnoreDialogDismiss(target: EventTarget | null): boolean {
+  return isFloatingLayerTarget(target) || isFloatingLayerOpen()
+}
+
 function DialogContent({
   className,
   children,
@@ -80,19 +104,19 @@ function DialogContent({
         )}
         onFocusOutside={(event) => {
           onFocusOutside?.(event)
-          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
             event.preventDefault()
           }
         }}
         onInteractOutside={(event) => {
           onInteractOutside?.(event)
-          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
             event.preventDefault()
           }
         }}
         onPointerDownOutside={(event) => {
           onPointerDownOutside?.(event)
-          if (!event.defaultPrevented && isFloatingLayerTarget(event.target)) {
+          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
             event.preventDefault()
           }
         }}

From e787361f6995eba9180a873beca58a3b469a61b4 Mon Sep 17 00:00:00 2001
From: qdzsh <github@qdzsh.dev>
Date: Mon, 22 Jun 2026 17:10:02 +0700
Subject: [PATCH 3/4] fix(ui): capture floating-layer state at pointerdown to
 survive close race

A mouse click outside an OPEN dropdown closed the dialog: Radix dismisses the
dropdown first (flipping data-state to closed), so the dialog's outside handler
saw no open layer on its live check and closed too. Esc worked because it does
not go through the outside-pointer path.

Capture isFloatingLayerOpen() in a document pointerdown listener on the CAPTURE
phase (runs before Radix's bubble-phase dismiss listeners, while the dropdown is
still open) and consult that captured flag in the dialog's outside handlers.
---
 frontend/src/components/ui/dialog.tsx | 41 +++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 86b34a773..9b50a7717 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -78,8 +78,17 @@ function isFloatingLayerOpen(): boolean {
   )
 }
 
-function shouldIgnoreDialogDismiss(target: EventTarget | null): boolean {
-  return isFloatingLayerTarget(target) || isFloatingLayerOpen()
+function shouldIgnoreDialogDismiss(
+  target: EventTarget | null,
+  floatingLayerWasOpen: boolean,
+): boolean {
+  // `floatingLayerWasOpen` is captured at pointerdown (capture phase, before any
+  // Radix dismiss handler runs). A mouse click outside an open dropdown closes
+  // that dropdown first, flipping its data-state to "closed" before this dialog
+  // handler runs, so a live isFloatingLayerOpen() check would already miss it and
+  // the dialog would wrongly close. The captured flag avoids that race; the live
+  // check still covers focus-driven dismissals.
+  return isFloatingLayerTarget(target) || floatingLayerWasOpen || isFloatingLayerOpen()
 }
 
 function DialogContent({
@@ -93,6 +102,19 @@ function DialogContent({
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
 }) {
+  // Capture whether a floating layer is open at the very start of each pointer
+  // interaction. Capture phase runs before Radix's own dismiss listeners, so the
+  // dropdown is still open here even though it closes before our outside handlers.
+  const floatingLayerOpenAtPointerDownRef = React.useRef(false)
+  React.useEffect(() => {
+    const onPointerDownCapture = () => {
+      floatingLayerOpenAtPointerDownRef.current = isFloatingLayerOpen()
+    }
+    document.addEventListener("pointerdown", onPointerDownCapture, true)
+    return () =>
+      document.removeEventListener("pointerdown", onPointerDownCapture, true)
+  }, [])
+
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -104,19 +126,28 @@ function DialogContent({
         )}
         onFocusOutside={(event) => {
           onFocusOutside?.(event)
-          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
+          if (
+            !event.defaultPrevented &&
+            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
+          ) {
             event.preventDefault()
           }
         }}
         onInteractOutside={(event) => {
           onInteractOutside?.(event)
-          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
+          if (
+            !event.defaultPrevented &&
+            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
+          ) {
             event.preventDefault()
           }
         }}
         onPointerDownOutside={(event) => {
           onPointerDownOutside?.(event)
-          if (!event.defaultPrevented && shouldIgnoreDialogDismiss(event.target)) {
+          if (
+            !event.defaultPrevented &&
+            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
+          ) {
             event.preventDefault()
           }
         }}

From 039632bddaf75e689830a5e758901034b4104f5f Mon Sep 17 00:00:00 2001
From: qdzsh <github@qdzsh.dev>
Date: Mon, 22 Jun 2026 17:24:04 +0700
Subject: [PATCH 4/4] refactor(ui): share floating-layer dismiss guard, apply
 to Sheet

Extract the dialog's nested-floating-layer dismiss guard (target allowlist +
capture-phase open-state flag) into a reusable useFloatingLayerDismissGuard hook
and consume it from DialogContent. Apply the same guard to SheetContent, which
is built on the Dialog primitive and shares the close-on-outside behaviour, so a
future Select/dropdown inside a Sheet will not close the sheet.

AlertDialog is intentionally left as-is: Radix AlertDialog is non-dismissible on
outside pointer interaction by design (it omits those handlers), so it cannot hit
this bug.
---
 frontend/src/components/ui/dialog.tsx         | 79 ++-----------------
 frontend/src/components/ui/sheet.tsx          | 20 +++++
 .../ui/use-floating-layer-dismiss-guard.ts    | 77 ++++++++++++++++++
 3 files changed, 102 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/ui/use-floating-layer-dismiss-guard.ts

diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 9b50a7717..07bf0a1a0 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -6,6 +6,7 @@ import { Dialog as DialogPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
+import { useFloatingLayerDismissGuard } from "@/components/ui/use-floating-layer-dismiss-guard"
 
 function Dialog({
   ...props
@@ -47,50 +48,6 @@ function DialogOverlay({
   )
 }
 
-const FLOATING_LAYER_SELECTOR = [
-  "[data-slot='select-content']",
-  "[data-slot='dropdown-menu-content']",
-  "[data-slot='dropdown-menu-sub-content']",
-  "[data-slot='popover-content']",
-  "[data-radix-popper-content-wrapper]",
-].join(", ")
-
-// Floating layers (Select / DropdownMenu / Popover) that are currently OPEN.
-// While one is open, an "outside" pointer/focus event is the user dismissing
-// that layer — not the dialog — even when the pointer lands outside every layer
-// (e.g. clicking the backdrop to close an open multi-select dropdown). The
-// layer closes itself; the dialog must stay open.
-const OPEN_FLOATING_LAYER_SELECTOR = [
-  "[data-slot='select-content'][data-state='open']",
-  "[data-slot='dropdown-menu-content'][data-state='open']",
-  "[data-slot='dropdown-menu-sub-content'][data-state='open']",
-  "[data-slot='popover-content'][data-state='open']",
-].join(", ")
-
-function isFloatingLayerTarget(target: EventTarget | null): boolean {
-  return target instanceof Element && target.closest(FLOATING_LAYER_SELECTOR) !== null
-}
-
-function isFloatingLayerOpen(): boolean {
-  return (
-    typeof document !== "undefined" &&
-    document.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null
-  )
-}
-
-function shouldIgnoreDialogDismiss(
-  target: EventTarget | null,
-  floatingLayerWasOpen: boolean,
-): boolean {
-  // `floatingLayerWasOpen` is captured at pointerdown (capture phase, before any
-  // Radix dismiss handler runs). A mouse click outside an open dropdown closes
-  // that dropdown first, flipping its data-state to "closed" before this dialog
-  // handler runs, so a live isFloatingLayerOpen() check would already miss it and
-  // the dialog would wrongly close. The captured flag avoids that race; the live
-  // check still covers focus-driven dismissals.
-  return isFloatingLayerTarget(target) || floatingLayerWasOpen || isFloatingLayerOpen()
-}
-
 function DialogContent({
   className,
   children,
@@ -102,18 +59,7 @@ function DialogContent({
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean
 }) {
-  // Capture whether a floating layer is open at the very start of each pointer
-  // interaction. Capture phase runs before Radix's own dismiss listeners, so the
-  // dropdown is still open here even though it closes before our outside handlers.
-  const floatingLayerOpenAtPointerDownRef = React.useRef(false)
-  React.useEffect(() => {
-    const onPointerDownCapture = () => {
-      floatingLayerOpenAtPointerDownRef.current = isFloatingLayerOpen()
-    }
-    document.addEventListener("pointerdown", onPointerDownCapture, true)
-    return () =>
-      document.removeEventListener("pointerdown", onPointerDownCapture, true)
-  }, [])
+  const guardDismiss = useFloatingLayerDismissGuard()
 
   return (
     <DialogPortal data-slot="dialog-portal">
@@ -126,30 +72,15 @@ function DialogContent({
         )}
         onFocusOutside={(event) => {
           onFocusOutside?.(event)
-          if (
-            !event.defaultPrevented &&
-            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
-          ) {
-            event.preventDefault()
-          }
+          guardDismiss(event)
         }}
         onInteractOutside={(event) => {
           onInteractOutside?.(event)
-          if (
-            !event.defaultPrevented &&
-            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
-          ) {
-            event.preventDefault()
-          }
+          guardDismiss(event)
         }}
         onPointerDownOutside={(event) => {
           onPointerDownOutside?.(event)
-          if (
-            !event.defaultPrevented &&
-            shouldIgnoreDialogDismiss(event.target, floatingLayerOpenAtPointerDownRef.current)
-          ) {
-            event.preventDefault()
-          }
+          guardDismiss(event)
         }}
         {...props}
       >
diff --git a/frontend/src/components/ui/sheet.tsx b/frontend/src/components/ui/sheet.tsx
index 423f1d047..4b5672234 100644
--- a/frontend/src/components/ui/sheet.tsx
+++ b/frontend/src/components/ui/sheet.tsx
@@ -3,6 +3,7 @@ import { XIcon } from "lucide-react"
 import { Dialog as SheetPrimitive } from "radix-ui"
 
 import { cn } from "@/lib/utils"
+import { useFloatingLayerDismissGuard } from "@/components/ui/use-floating-layer-dismiss-guard"
 
 function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
   return <SheetPrimitive.Root data-slot="sheet" {...props} />
@@ -47,16 +48,35 @@ function SheetContent({
   children,
   side = "right",
   showCloseButton = true,
+  onFocusOutside,
+  onInteractOutside,
+  onPointerDownOutside,
   ...props
 }: React.ComponentProps<typeof SheetPrimitive.Content> & {
   side?: "top" | "right" | "bottom" | "left"
   showCloseButton?: boolean
 }) {
+  // Keep the sheet open when an outside interaction is really the user
+  // dismissing a nested floating layer (Select / DropdownMenu / Popover).
+  const guardDismiss = useFloatingLayerDismissGuard()
+
   return (
     <SheetPortal>
       <SheetOverlay />
       <SheetPrimitive.Content
         data-slot="sheet-content"
+        onFocusOutside={(event) => {
+          onFocusOutside?.(event)
+          guardDismiss(event)
+        }}
+        onInteractOutside={(event) => {
+          onInteractOutside?.(event)
+          guardDismiss(event)
+        }}
+        onPointerDownOutside={(event) => {
+          onPointerDownOutside?.(event)
+          guardDismiss(event)
+        }}
         className={cn(
           "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out overscroll-contain data-[state=closed]:duration-300 data-[state=open]:duration-500",
           side === "right" &&
diff --git a/frontend/src/components/ui/use-floating-layer-dismiss-guard.ts b/frontend/src/components/ui/use-floating-layer-dismiss-guard.ts
new file mode 100644
index 000000000..85743c834
--- /dev/null
+++ b/frontend/src/components/ui/use-floating-layer-dismiss-guard.ts
@@ -0,0 +1,77 @@
+"use client"
+
+import * as React from "react"
+
+// Floating layers (Radix Select / DropdownMenu / Popover, or anything rendered
+// through a Radix popper) that can appear inside a modal. Clicking inside one —
+// or outside one while it is open — must dismiss the LAYER, never the modal.
+const FLOATING_LAYER_SELECTOR = [
+  "[data-slot='select-content']",
+  "[data-slot='dropdown-menu-content']",
+  "[data-slot='dropdown-menu-sub-content']",
+  "[data-slot='popover-content']",
+  "[data-radix-popper-content-wrapper]",
+].join(", ")
+
+const OPEN_FLOATING_LAYER_SELECTOR = [
+  "[data-slot='select-content'][data-state='open']",
+  "[data-slot='dropdown-menu-content'][data-state='open']",
+  "[data-slot='dropdown-menu-sub-content'][data-state='open']",
+  "[data-slot='popover-content'][data-state='open']",
+].join(", ")
+
+function isFloatingLayerTarget(target: EventTarget | null): boolean {
+  return target instanceof Element && target.closest(FLOATING_LAYER_SELECTOR) !== null
+}
+
+function isFloatingLayerOpen(): boolean {
+  return (
+    typeof document !== "undefined" &&
+    document.querySelector(OPEN_FLOATING_LAYER_SELECTOR) !== null
+  )
+}
+
+// Minimal shape shared by Radix's FocusOutside / PointerDownOutside /
+// InteractOutside events.
+type DismissEvent = {
+  target: EventTarget | null
+  defaultPrevented: boolean
+  preventDefault: () => void
+}
+
+/**
+ * Guard for a modal's onFocusOutside / onInteractOutside / onPointerDownOutside:
+ * keeps the modal open when the "outside" interaction is really the user
+ * dismissing a nested floating layer (Select / DropdownMenu / Popover / custom
+ * multi-select), instead of closing the modal.
+ *
+ * The captured-at-pointerdown flag is essential: a mouse click outside an OPEN
+ * dropdown makes Radix close that dropdown FIRST (its data-state flips to
+ * "closed") before the modal's outside handler runs, so a live DOM check would
+ * already miss it and the modal would wrongly close. We capture the open-state
+ * in a document pointerdown listener on the CAPTURE phase, which runs before
+ * Radix's own bubble-phase dismiss listeners.
+ */
+export function useFloatingLayerDismissGuard() {
+  const floatingLayerOpenAtPointerDownRef = React.useRef(false)
+
+  React.useEffect(() => {
+    const onPointerDownCapture = () => {
+      floatingLayerOpenAtPointerDownRef.current = isFloatingLayerOpen()
+    }
+    document.addEventListener("pointerdown", onPointerDownCapture, true)
+    return () =>
+      document.removeEventListener("pointerdown", onPointerDownCapture, true)
+  }, [])
+
+  return React.useCallback((event: DismissEvent) => {
+    if (
+      !event.defaultPrevented &&
+      (isFloatingLayerTarget(event.target) ||
+        floatingLayerOpenAtPointerDownRef.current ||
+        isFloatingLayerOpen())
+    ) {
+      event.preventDefault()
+    }
+  }, [])
+}