fix(ui): keep login recovery accessible

steipete · web-flow · commit f9e194e4a122 · 2026-07-05T06:13:00.000-07:00
diff --git a/ui/src/components/login-gate.ts b/ui/src/components/login-gate.ts
@@ -263,16 +263,14 @@ export function resolveLoginFailureFeedback(
 }
 
 function renderLoginFailure(feedback: LoginFailureFeedback) {
-  // Collapsed by default on purpose: the failure title stays visible while the
-  // gate keeps its compact single-screen layout; users expand for recovery steps.
   return html`
-    <details
+    <div
       class="callout danger login-gate__failure"
       role="alert"
       aria-live="polite"
       data-kind=${feedback.kind}
     >
-      <summary class="login-gate__failure-title">${feedback.title}</summary>
+      <div class="login-gate__failure-title">${feedback.title}</div>
       <div class="login-gate__failure-summary">${feedback.summary}</div>
       <ol class="login-gate__failure-steps">
         ${feedback.steps.map((step) => html`<li>${step}</li>`)}
@@ -288,7 +286,7 @@ function renderLoginFailure(feedback: LoginFailureFeedback) {
         rel=${buildExternalLinkRel()}
         >${feedback.docsLabel}</a
       >
-    </details>
+    </div>
   `;
 }
 
diff --git a/ui/src/e2e/login-gate.e2e.test.ts b/ui/src/e2e/login-gate.e2e.test.ts
@@ -143,9 +143,6 @@ describeControlUiE2e("Control UI responsive login gate E2E", () => {
         ),
       ).toBe(true);
 
-      // Recovery details live behind the collapsed failure disclosure; expand
-      // it before checking the docs link stays reachable inside the viewport.
-      await page.locator(".login-gate__failure-title").click();
       const failureDocs = page.locator(".login-gate__failure-docs");
       await failureDocs.scrollIntoViewIfNeeded();
       const failureDocsBox = await failureDocs.boundingBox();
@@ -158,19 +155,14 @@ describeControlUiE2e("Control UI responsive login gate E2E", () => {
     }
   });
 
-  it("collapses the failure and help disclosures until expanded", async () => {
+  it("keeps failure recovery visible while generic help stays collapsed", async () => {
     const context = await browser.newContext({ viewport: { height: 900, width: 1280 } });
     const page = await context.newPage();
 
     try {
       await renderLoginGate(page);
       const failure = page.locator(".login-gate__failure");
-      expect(await failure.evaluate((element) => element.tagName)).toBe("DETAILS");
-      expect(await failure.getAttribute("open")).toBeNull();
-      expect(await page.locator(".login-gate__failure-title").isVisible()).toBe(true);
-      expect(await page.locator(".login-gate__failure-steps").isVisible()).toBe(false);
-
-      await page.locator(".login-gate__failure-title").click();
+      expect(await failure.evaluate((element) => element.tagName)).toBe("DIV");
       expect(await page.locator(".login-gate__failure-summary").isVisible()).toBe(true);
       expect(await page.locator(".login-gate__failure-steps").isVisible()).toBe(true);
       expect(await page.locator(".login-gate__failure-docs").isVisible()).toBe(true);
@@ -179,9 +171,6 @@ describeControlUiE2e("Control UI responsive login gate E2E", () => {
       expect(await help.evaluate((element) => element.tagName)).toBe("DETAILS");
       expect(await help.getAttribute("open")).toBeNull();
       expect(await page.locator(".login-gate__steps").isVisible()).toBe(false);
-
-      await page.locator(".login-gate__help-title").click();
-      expect(await page.locator(".login-gate__steps").isVisible()).toBe(true);
     } finally {
       await closeContext(context);
     }
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
@@ -93,7 +93,6 @@
   font-size: 14px;
   font-weight: 700;
   color: var(--fg);
-  cursor: pointer;
 }
 
 .login-gate__failure-summary {

Original file line number	Diff line number	Diff line change
`@@ -93,7 +93,6 @@`
`93`	`93`	`font-size: 14px;`
`94`	`94`	`font-weight: 700;`
`95`	`95`	`color: var(--fg);`
`96`		`- cursor: pointer;`
`97`	`96`	`}`
`98`	`97`
`99`	`98`	`.login-gate__failure-summary {`