fix(ci): update visual tests to address viewport and race conditions

Co-authored-by: PR0M3TH3AN <[email protected]>

tests/visual/embed-layout.spec.ts

@@ -4,15 +4,26 @@ import { THEME_ACCENT_OVERRIDES } from "../../config/instance-config.js";
 test.describe("embed layout and styling", () => {
   test("embed video fills container and uses accent color", async ({ page }) => {
     // Navigate to embed.html with a dummy pointer to trigger logic
-    await page.goto("/embed.html?pointer=nevent123", { waitUntil: "domcontentloaded" });
+    await page.goto("/embed.html?pointer=nevent123", { waitUntil: "networkidle" });
+
+    // The configured color is #540011 (from config/instance-config.js)
+    const expectedAccent = THEME_ACCENT_OVERRIDES?.light?.accent || "#ff6b6b";
 
     // 1. Verify CSS Variable
+    // We wait for the variable to compute to a non-empty value to handle async loading
+    await page.waitForFunction(
+        (expected) => {
+            const val = getComputedStyle(document.documentElement).getPropertyValue("--bitvid-accent").trim();
+            return val && val !== "" && (val === expected || val.toLowerCase() === expected.toLowerCase());
+        },
+        expectedAccent
+    );
+
     const accentColor = await page.evaluate(() => {
       return getComputedStyle(document.documentElement).getPropertyValue("--bitvid-accent").trim();
     });
-    // The configured color is #540011 (from config/instance-config.js)
-    const expectedAccent = THEME_ACCENT_OVERRIDES?.light?.accent || "#ff6b6b";
-    expect(accentColor).toBe(expectedAccent);
+
+    expect(accentColor.toLowerCase()).toBe(expectedAccent.toLowerCase());
 
     // 2. Verify Video Element Styling
     const video = page.locator("#embedVideo");