feat(tabs): orbit the working ring around a busy session tab's dot

The desktop home rail and the phone overview both draw a spinning
`tab-load-spin` ring around their green dot while a session works; the
tab strip itself only pulsed. Same ring on the tab dot now, so "working"
reads identically on every surface.

Drawn as a ::after border circle rather than a halo: the skin block sets
`box-shadow: none` on .tab-status.busy to keep tab dots quiet and
outranks any plain class rule, and a pseudo-element sidesteps that
without reintroducing the glow. It is absolutely positioned, so it never
widens the tab or shifts the label, and it is disabled under
prefers-reduced-motion.

Phones keep their existing tell (a 9px dot with a glow) and suppress the
ring: a 15px ring inside a 32px tab would sit on top of the tab name.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Codeman maintainer
2026-08-10 04:00:05 +02:00
parent 45ad9de89e
commit 8fcfdb1e6e
2 changed files with 27 additions and 0 deletions
+7
View File
@@ -680,6 +680,13 @@ html.mobile-init .file-browser-panel {
box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
}
/* No orbiting ring on phone tabs (styles.css draws one on desktop/tablet):
the dot is already enlarged to 9px with a glow here, and a 15px ring in a
32px tab would sit on top of the tab name. The glow is the phone's tell. */
.session-tab .tab-status.busy::after {
display: none;
}
/* Truncate tab names more aggressively on mobile */
.session-tab .tab-name {
max-width: 50px;