From d78830aa52ba340016d4bac33420536c16faaa51 Mon Sep 17 00:00:00 2001
From: Logan <logan@ljones.me>
Date: Fri, 21 Aug 2026 10:48:28 -0400
Subject: [PATCH] fix(ui): make the touch pen a corner chip, not a scrim over
 the art
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Always-visible is not the same as always-in-the-way: the overlay is inset:0 at 50% black, so gating it on hover left every touch device with the artwork it is editing permanently darkened. It is only a hint — .cover-art-edit carries the click, so tapping the art always worked — while the × really is the only route to its action and stays. The chip borrows the remove button's size, disc and alpha.

Also corrects the claim that no tier can render as a touch device: no committed one does, which is a choice about projects rather than a limit.
---
 CLAUDE.md                                     | 18 ++++++++++---
 .../components/track-details/track-details.ts | 25 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 50150ce..078069e 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -1479,10 +1479,20 @@ and its place in the accessibility tree. Where the control is the
 overlay and remove, `shortcut-capture`'s reset (#137) — because hiding
 it takes the action away entirely.
 
-One thing to know before checking either: **no tier here can render as a
-touch device.** CDP's `Emulation.setEmulatedMedia` does not reach the
-component tier's iframe, and the e2e projects are Desktop Chrome and
-Desktop Safari, neither of which has touch. So
+**Always-visible is not the same as always-in-the-way.** The cover-art
+overlay is `inset: 0` at 50% black, which is fine as a hover state and
+is not fine as the permanent appearance of the artwork being edited —
+and it is only a *hint*, since `.cover-art-edit` carries the click and
+tapping the art always worked. Off hover it becomes a corner chip in
+the remove button's own language. The × beside it stays full-size,
+because that one really is the only route to its action.
+
+One thing to know before checking either: **no *committed* tier renders
+as a touch device.** CDP's `Emulation.setEmulatedMedia` does not reach
+the component tier's iframe, and the e2e projects are Desktop Chrome
+and Desktop Safari, neither of which has touch — a Playwright project
+using a mobile descriptor would report `hover: none`, so this is a
+choice not to carry one rather than a thing that cannot be done. So
 `hover-affordance.test.ts` asserts the *parsed stylesheet* — which rule
 sits inside which media query — and says so; the regression it exists
 for is someone hoisting a rule out of its query as a tidy-up, which
diff --git a/frontend/src/components/track-details/track-details.ts b/frontend/src/components/track-details/track-details.ts
index 992a326..f63d6b2 100644
--- a/frontend/src/components/track-details/track-details.ts
+++ b/frontend/src/components/track-details/track-details.ts
@@ -538,10 +538,33 @@ export class TrackDetails extends LitElement {
          * and nothing about the layout moves.
          */
         @media not all and (hover: hover) {
-            .cover-art-overlay,
+            /* The × is genuinely the only route to removing the art, so
+               on a device that cannot hover it is simply always there.
+
+               The pen is not: .cover-art-edit carries the click that
+               opens the file picker, so tapping the artwork already
+               worked while the overlay was invisible. It is a discovery
+               hint — and paying for discovery by covering the artwork
+               being edited in 50% black, permanently, on every touch
+               device, is heavier than the hint is worth. It becomes a
+               corner chip in the remove button's own visual language
+               instead: same size, same disc, same alpha. */
             .cover-art-remove {
                 opacity: 1;
             }
+
+            .cover-art-overlay {
+                opacity: 1;
+                inset: auto 4px 4px auto;
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                background: rgba(0, 0, 0, 0.7);
+            }
+
+            .cover-art-overlay wa-icon {
+                font-size: 14px;
+            }
         }
 
         /* Error message */