From df0af7641d225dd4a5f98b0bcc59435e5dd19737 Mon Sep 17 00:00:00 2001
From: Ali Al Dallal <ali@alicoding.com>
Date: Mon, 17 Aug 2026 21:25:04 -0400
Subject: [PATCH] fix: selected sticky legible over its yellow ground -- accent
 border flip + wider ring; suppress the pointer-click focus halo

The 2px card ring vanished against the sticky's attention tint (the
owner saw only the webview's OS focus flash); a selected note now
flips its border to the accent under a 3px ring, and a pointer click
no longer flashes the focus halo (keyboard :focus-visible keeps its
ring). Regression pinned: selection must change the sticky's
computed border-color.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FW5GkkAG8du7tNdYLk2zSd
---
 frontend/e2e/atlas-select-group.spec.ts       | 24 +++++++++++++++++++
 frontend/src/atlas/AtlasStickyNode.module.css | 20 ++++++++++++----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/frontend/e2e/atlas-select-group.spec.ts b/frontend/e2e/atlas-select-group.spec.ts
index 0b9413db..0719e3ce 100644
--- a/frontend/e2e/atlas-select-group.spec.ts
+++ b/frontend/e2e/atlas-select-group.spec.ts
@@ -200,6 +200,30 @@ test('atlas shift-click select: toggle membership, group via member right-click,
     await expect(selected).toHaveCount(1)
     await cardB.click({ modifiers: ['Shift'] })
     await expect(selected).toHaveCount(2)
+
+    // Regression: a selected STICKY's ring must survive its yellow
+    // ground -- the border flips to the accent on selection (the 2px
+    // card ring alone was invisible over the attention tint).
+    await page.keyboard.press('n')
+    const noteBB = await board.boundingBox()
+    if (!noteBB) throw new Error('board box missing for note placement')
+    await page.mouse.click(noteBB.x + noteBB.width - 60, noteBB.y + noteBB.height - 80)
+    const noteTA = page.getByTestId('atlas-sticky-textarea')
+    await noteTA.fill('ZzK2eStickySel')
+    await noteTA.blur()
+    const stickyNote = page.locator('[data-testid="atlas-sticky-note"]')
+    const restingBorder = await stickyNote.evaluate((el) => getComputedStyle(el).borderColor)
+    await stickyNote.click({ modifiers: ['Shift'] })
+    await expect(selected).toHaveCount(3)
+    const selectedBorder = await stickyNote.evaluate((el) => getComputedStyle(el).borderColor)
+    expect(selectedBorder).not.toBe(restingBorder)
+    // Deselect + delete the note so the rest of the flow sees its
+    // original two-card selection world.
+    await stickyNote.click({ modifiers: ['Shift'] })
+    await expect(selected).toHaveCount(2)
+    await stickyNote.click({ button: 'right' })
+    await menu.getByText('Delete note', { exact: true }).click()
+    await expect(stickyNote).toHaveCount(0)
     await expect(page.locator('[data-testid="atlas-note-card"][data-flipped="true"]')).toHaveCount(0)
     await cardB.click({ modifiers: ['Shift'] })
     await expect(selected).toHaveCount(1)
diff --git a/frontend/src/atlas/AtlasStickyNode.module.css b/frontend/src/atlas/AtlasStickyNode.module.css
index d5cf28cd..ab3ebece 100644
--- a/frontend/src/atlas/AtlasStickyNode.module.css
+++ b/frontend/src/atlas/AtlasStickyNode.module.css
@@ -17,13 +17,23 @@
     cursor: text;
 }
 
-/* Multi-selection outline (owner-caught follow-up to goal 0092): same
-   box-shadow ring AtlasNoteCardNode.module.css uses, keyed off React
-   Flow's own .selected on the node's outer wrapper. */
+/* Multi-selection outline (owner-caught follow-up to goal 0092),
+   heavier than the card ring on purpose: the sticky's attention-tinted
+   ground swallows the 2px accent line cards get away with on white --
+   a wider ring plus the border flipping to the accent keeps a selected
+   note legible at board zoom. */
 :global(.react-flow__node.selected) .sticky {
+    border-color: var(--borderColor-accent-emphasis);
     box-shadow:
-        0 0 0 2px var(--borderColor-accent-emphasis),
-        0 0 0 5px var(--bgColor-accent-muted);
+        0 0 0 3px var(--borderColor-accent-emphasis),
+        0 0 0 7px var(--bgColor-accent-muted);
+}
+
+/* A pointer click must not flash the webview's OS focus halo (the
+   "blue flash" over the selection ring); keyboard focus keeps its
+   visible ring via :focus-visible. */
+.sticky:focus:not(:focus-visible) {
+    outline: none;
 }
 
 .text {