diff --git a/frontend/packages/dashboard/src/dashboard.css b/frontend/packages/dashboard/src/dashboard.css index 2bf741e9..510ec532 100644 --- a/frontend/packages/dashboard/src/dashboard.css +++ b/frontend/packages/dashboard/src/dashboard.css @@ -326,17 +326,16 @@ a:hover { border-color: var(--amber); background: rgba(250, 179, 135, 0.05); } -/* The spinner is a single rotating arc — a transparent ring with - only the top side coloured amber. As it rotates, the visible arc - sweeps around the icon like a classic loading indicator. Earlier - shapes (two-adjacent-sides → L-corner; faint-ring + bright-arc → - reads as a static border) didn't read unambiguously as a spinner - — this one has no full ring, only the moving arc. +/* The spinner is a circular arc — a transparent ring with only the + top side coloured amber (border-top-color). As it rotates, the + visible arc sweeps around the icon like a classic loading indicator. + border-radius: 50% is required for the arc to travel a circle; + an earlier shape used border-radius: 11px which made the ring a + rounded rectangle, so the arc swept a rectangular path and read as + a spinning border side rather than a spinner. - The 3px stroke + thicker rounded radius gives the arc enough - visual weight that it doesn't disappear at typical viewport - sizes. Override the icon's overflow:hidden so the ring can sit - just outside the square; it composes naturally with the mauve + The 3px stroke and overflow:visible override let the ring sit just + outside the square icon; it composes naturally with the mauve selected-ring (selected + running shows both). */ @keyframes container-icon-spin { from { transform: rotate(0deg); } @@ -349,7 +348,7 @@ a:hover { content: ''; position: absolute; inset: -5px; - border-radius: 11px; + border-radius: 50%; border: 3px solid transparent; border-top-color: var(--amber); animation: container-icon-spin 0.9s linear infinite;