From 14871869ab963e9938a9e99278475e6603a9cb32 Mon Sep 17 00:00:00 2001
From: Timothy Laurent <timothyjlaurent@gmail.com>
Date: Tue, 5 May 2026 11:43:24 -0700
Subject: [PATCH] fix: move spinner keyframes outside :root selector block
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The @keyframes spin and .animate-spin rules were incorrectly placed
inside the first :root {} block, which is invalid CSS — @keyframes
cannot be nested inside selector blocks. Browsers silently ignore
them in that position, so the spinners would still get stuck on pages
without component CSS loaded.

Moves the rules to the stylesheet top level between the two :root
blocks. Also fixes the mobile-css regression test that parses the
first :root block with a non-greedy regex.

Addresses review feedback from Greptile (P1) and CodeRabbit on PR #40.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/dashboard/app/styles.css | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/dashboard/app/styles.css b/packages/dashboard/app/styles.css
index 3e875404a..3cad2dc9f 100644
--- a/packages/dashboard/app/styles.css
+++ b/packages/dashboard/app/styles.css
@@ -164,17 +164,6 @@ html {
   --transition-normal: 0.2s ease;
   --transition-slow: 0.3s ease;
 
-/* Global spinner animation — used by 25+ components via className="animate-spin"
-   or inline animation: "spin ...". Must live here (not in TaskCard.css) so the
-   keyframes and utility class are available before any task cards are loaded. */
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
-}
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
   /* Backward-compatible aliases */
   --radius: var(--radius-md);
   --shadow: var(--shadow-lg);
@@ -186,6 +175,18 @@ html {
   --xsmall-breakpoint: 640px;
 }
 
+/* Global spinner animation — used by 25+ components via className="animate-spin"
+   or inline animation: "spin ...". Must live at the stylesheet top level (not
+   inside any selector block) so the keyframes and utility class are available
+   before any task cards are loaded. */
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
+
 :root {
   --bg: #0d1117;
   --surface: #161b22;