test: webkit flake. (#83)

Author: knightedcodemonkey

playwright/helpers/app-test-helpers.ts

@@ -293,7 +293,15 @@ export const ensureDiagnosticsDrawerOpen = async (page: Page) => {
   const isExpanded = await toggle.getAttribute('aria-expanded')
 
   if (isExpanded !== 'true') {
-    await toggle.click()
+    try {
+      await toggle.click({ timeout: 2_000 })
+    } catch {
+      /* WebKit can report pointer interception from the drawer during transitions. */
+      await toggle.focus()
+      await page.keyboard.press('Enter')
+    }
+
+    await expect(toggle).toHaveAttribute('aria-expanded', 'true')
   }
 
   await expect(page.getByRole('complementary', { name: 'Diagnostics' })).toBeVisible()

src/styles/ai-controls.css

@@ -350,21 +350,34 @@
   align-items: center;
   gap: 6px;
   margin-left: 2px;
+  --workspaces-toggle-color: color-mix(in srgb, #60a5fa 84%, var(--panel-text));
+  --workspaces-toggle-color-disabled: color-mix(
+    in srgb,
+    var(--text-muted) 82%,
+    var(--panel-text)
+  );
   color: color-mix(in srgb, var(--panel-text) 84%, var(--text-subtle));
 }
 
 .diagnostics-toggle.workspaces-toggle:hover:not(:disabled) {
-  color: color-mix(in srgb, var(--accent) 82%, var(--panel-text));
+  color: var(--workspaces-toggle-color);
+}
+
+.diagnostics-toggle.workspaces-toggle:disabled {
+  opacity: 0.64;
+  cursor: not-allowed;
+  --workspaces-toggle-color: var(--workspaces-toggle-color-disabled);
+  color: color-mix(in srgb, var(--text-muted) 82%, var(--panel-text));
 }
 
 .workspaces-toggle__icon {
   width: 16px;
   height: 16px;
-  fill: currentColor;
+  fill: var(--workspaces-toggle-color);
 }
 
 .workspaces-toggle__icon path {
-  fill: currentColor;
+  fill: var(--workspaces-toggle-color);
 }
 
 .github-pr-context-close {