Merge branch 'fix/mobile-sticky-hover-focus'

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013XSohfUQQiaE77qyFLgSv3

1 files changed, 22 insertions, 2 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index 9a4fb5a..5748b2d 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -48,6 +48,16 @@
 
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
+/* A tapped button keeps real DOM focus on mobile Chrome/Safari the way a
+   click never does on desktop — there's no mouse to move away afterward, so
+   the browser's own default focus ring (never reset anywhere in this file)
+   is what stayed visibly "pressed" until something else was tapped (found
+   live, 2026-08-26 — the nav hamburger has no :hover rule of its own at all,
+   so the ring was the only thing that could have been showing). `:focus-
+   visible` still shows it for real keyboard navigation — this only clears
+   the leftover from a pointer/touch interaction, never accessibility. */
+:focus:not(:focus-visible) { outline: none; }
+
 body {
   font-family: system-ui, -apple-system, sans-serif;
   background: var(--bg-base);
@@ -3055,7 +3065,15 @@ a.transfer-name {
   cursor: pointer;
   position: relative;
 }
-.music-player-btn:hover { background: var(--bg-surface); color: var(--text); }
+/* (hover: hover) — a tap on a touchscreen fires a synthetic hover that
+   never gets a "pointer left" to end it, so next/prev/shuffle stayed
+   highlighted as if still being pressed until some other element was
+   tapped (found live on mobile Chrome, 2026-08-26; not reproducible on
+   desktop, which actually has a mouse to move away with). Scoped to
+   devices that can genuinely hover — real hover behaviour is unaffected. */
+@media (hover: hover) {
+  .music-player-btn:hover { background: var(--bg-surface); color: var(--text); }
+}
 .music-player-btn.active { color: var(--accent); }
 .music-player-btn .icon { width: 16px; height: 16px; }
 .music-player-play {
@@ -3064,7 +3082,9 @@ a.transfer-name {
   background: var(--accent);
   color: var(--accent-text);
 }
-.music-player-play:hover { background: var(--accent-hover); color: var(--accent-text); }
+@media (hover: hover) {
+  .music-player-play:hover { background: var(--accent-hover); color: var(--accent-text); }
+}
 .music-player-play:disabled { opacity: 0.6; cursor: not-allowed; }
 .music-repeat-badge {
   position: absolute;