From 65f385a7a0eb14aee76e72dcd39164cec02b6c1d Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive>
Date: Sun, 31 May 2026 21:41:57 +0200
Subject: [PATCH] fix(#804): spinner arc needs border-radius: 50% to travel a
 circle

The ::after spinner ring used border-radius: 11px on a ~90px element,
making it a rounded rectangle. The amber arc swept around a rectangular
path, reading as a spinning border side. border-radius: 50% makes it a
true circle and the arc sweeps smoothly like a classic loading spinner.
---
 frontend/packages/dashboard/src/dashboard.css | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

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;