From 63d0183dd2336cb48cb54b5d9d4e7434d6401406 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Mon, 3 Aug 2026 16:45:32 -0400
Subject: [PATCH] fix(ui): stop the dashboard cards leaving a backdrop-filter
 seam
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A vertical line crossing both dashboard cards, appearing at random on
hover and hard to catch deliberately.

Diagnosed from the screenshot rather than by reproduction. Decoding it
and scanning column by column found a lone brightness step at CSS x=633
that never returns — every legitimate container edge in the page shows
up as a PAIR of steps 2px apart (the card borders at CSS 255, 288, 850,
875, 1437), so an unpaired one is not a border. Sampling by region
placed it inside the cards and nowhere else: 10/13 rows inside My Apps,
11/11 inside Wallet, 2/10 in the gap between them, 2/13 above them. Same
screen x in both cards, which means the boundary lives in screen space
and cuts whatever backdrop-filter surface it crosses.

style.css already neutralises backdrop-filter for the shared glass
classes inside the dashboard's animated perspective/scroll containers,
because Chromium/Brave mis-rasterise it there — that block was written
for the black-rectangle corruption. `.home-card-shell` declares its own
`backdrop-filter: blur(18px)` in Home.vue and was never added to the
list, so it was the only unmitigated blur surface on the dashboard.
That is exactly the set of pixels the seam appears in. A hover repaint
re-rasterises part of the backdrop, and the refreshed half meets the
stale half at the damage boundary.

Adding it to the existing list also makes the shell consistent with the
tiles beside it: its fill is already rgba(0,0,0,0.65), the same as
.glass-card, which renders unblurred here.

The list is hand-maintained, which is how this shipped — a component
declaring backdrop-filter in its own <style> is simply not covered and
nothing fails. So the fix comes with a test that parses Home.vue for
locally-declared backdrop-filter rules and asserts each is in the
mitigation list. Verified it catches the real bug: reverting the
one-line fix makes it fail naming `.home-card-shell`.

Tests: 3/3 new, vue-tsc clean, mitigation confirmed in the built CSS.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 neode-ui/src/style.css                        | 16 +++-
 .../__tests__/dashboardBackdropFilter.test.ts | 80 +++++++++++++++++++
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts

diff --git a/neode-ui/src/style.css b/neode-ui/src/style.css
index eaa2ceb8..e3307c14 100644
--- a/neode-ui/src/style.css
+++ b/neode-ui/src/style.css
@@ -324,8 +324,22 @@ html.controller-nav [data-controller-container]:focus {
 
   /* Dashboard content lives inside animated perspective/scroll containers.
      Chromium/Brave can corrupt backdrop-filter + transformed cards into black
-     square/rectangle layers, so use translucent fills there instead. */
+     square/rectangle layers, so use translucent fills there instead.
+
+     `.home-card-shell` (Home.vue) was missing from this list and kept its own
+     `backdrop-filter: blur(18px)`, producing a second, subtler form of the
+     same corruption: a vertical seam where the blurred backdrop is refreshed
+     on one side and stale on the other. Because the boundary is in SCREEN
+     space, it cut both dashboard cards at the same x and vanished in the gap
+     between them — which is how it was identified from a screenshot
+     (2026-08-03: a lone unpaired brightness step at CSS x=633, present on
+     10/13 sampled rows inside the cards and 2/10 in the gap). It surfaced on
+     hover because a hover repaint is what re-rasterises part of the
+     backdrop. The card's fill is already rgba(0,0,0,0.65) — the same as
+     .glass-card, which renders unblurred here — so dropping the blur also
+     makes the shell consistent with the tiles beside it. */
   body.dashboard-active .dashboard-scroll-panel .glass-card,
+  body.dashboard-active .dashboard-scroll-panel .home-card-shell,
   body.dashboard-active .dashboard-scroll-panel .glass,
   body.dashboard-active .dashboard-scroll-panel .mode-switcher,
   body.dashboard-active .dashboard-scroll-panel .glass-button,
diff --git a/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts b/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts
new file mode 100644
index 00000000..384c28f8
--- /dev/null
+++ b/neode-ui/src/views/__tests__/dashboardBackdropFilter.test.ts
@@ -0,0 +1,80 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+/**
+ * Chromium/Brave mis-rasterise `backdrop-filter` inside the dashboard's
+ * animated perspective/scroll containers. style.css already neutralises it
+ * for the shared glass classes, but that list is hand-maintained: a component
+ * that declares its own `backdrop-filter` in a local <style> block is simply
+ * not covered, and nothing fails.
+ *
+ * That is exactly how the 2026-08-03 seam shipped. `.home-card-shell` carried
+ * `backdrop-filter: blur(18px)` in Home.vue and was missing from the list, so
+ * a hover repaint left a vertical line where the refreshed backdrop met the
+ * stale one — visible in both dashboard cards at the same screen x, and
+ * absent in the gap between them.
+ *
+ * This test makes the omission fail loudly instead of shipping as a glitch
+ * nobody can reproduce on demand.
+ */
+
+const root = resolve(__dirname, '../../..')
+const styleCss = readFileSync(resolve(root, 'src/style.css'), 'utf8')
+
+/** The selector list that disables backdrop-filter on the dashboard. */
+function dashboardMitigationBlock(): string {
+  const start = styleCss.indexOf('body.dashboard-active .dashboard-scroll-panel .glass-card')
+  expect(start, 'dashboard backdrop-filter mitigation block not found').toBeGreaterThan(-1)
+  const end = styleCss.indexOf('}', start)
+  return styleCss.slice(start, end)
+}
+
+/** Class selectors that declare a non-none backdrop-filter in a .vue file. */
+function blurredClassesIn(relPath: string): string[] {
+  const src = readFileSync(resolve(root, relPath), 'utf8')
+  const found = new Set<string>()
+  // Match `.some-class { ... backdrop-filter: <not none> ... }` on one line,
+  // which is how these single-line rules are written in this codebase.
+  const ruleRe = /(\.[a-zA-Z0-9_-]+)\s*\{([^}]*)\}/g
+  let m: RegExpExecArray | null
+  while ((m = ruleRe.exec(src)) !== null) {
+    const selector = m[1]
+    const body = m[2]
+    if (!selector || !body) continue
+    const decl = /(?:^|[;{\s])backdrop-filter\s*:\s*([^;]+)/.exec(body)
+    if (decl?.[1] && decl[1].trim() !== 'none') found.add(selector)
+  }
+  return [...found]
+}
+
+describe('dashboard backdrop-filter mitigation', () => {
+  it('covers every backdrop-filter surface Home.vue defines itself', () => {
+    const block = dashboardMitigationBlock()
+    const uncovered = blurredClassesIn('src/views/Home.vue').filter(
+      (sel) => !block.includes(`.dashboard-scroll-panel ${sel},`),
+    )
+    expect(
+      uncovered,
+      `these Home.vue classes declare backdrop-filter but are not in the ` +
+        `body.dashboard-active .dashboard-scroll-panel mitigation list in style.css, ` +
+        `so Chromium will leave repaint seams across the dashboard cards`,
+    ).toEqual([])
+  })
+
+  it('still lists the shared glass classes', () => {
+    // Guards against someone "cleaning up" the list and silently reopening
+    // the original black-rectangle corruption this block was written for.
+    const block = dashboardMitigationBlock()
+    for (const sel of ['.glass-card', '.glass-button', '.home-card-shell']) {
+      expect(block).toContain(`.dashboard-scroll-panel ${sel},`)
+    }
+  })
+
+  it('the mitigation actually disables the filter', () => {
+    const start = styleCss.indexOf('body.dashboard-active .dashboard-scroll-panel .glass-card')
+    const body = styleCss.slice(styleCss.indexOf('{', start), styleCss.indexOf('}', start))
+    expect(body).toContain('backdrop-filter: none')
+    expect(body).toContain('-webkit-backdrop-filter: none')
+  })
+})