From d055b5b8fc2848e85e27831736a01969e9d4e190 Mon Sep 17 00:00:00 2001
From: Diego Rodrigues de Sa e Souza
 <8016841+diegosouzapw@users.noreply.github.com>
Date: Thu, 18 Jun 2026 20:50:14 -0300
Subject: [PATCH] fix(dashboard): make provider card hover visible (was
 ~invisible 1% opacity) (#4214)

Integrated into release/v3.8.29 (round 8)
---
 .../dashboard/media-providers/[kind]/page.tsx |  2 +-
 .../providers/components/ProviderCard.tsx     |  2 +-
 tests/unit/card-hover-visible.test.ts         | 42 +++++++++++++++++++
 3 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/card-hover-visible.test.ts

diff --git a/src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx b/src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx
index 96a6fed124..bf019d9e04 100644
--- a/src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx
+++ b/src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx
@@ -71,7 +71,7 @@ export default async function MediaProviderKindPage({ params }: PageProps) {
                 href={`/dashboard/media-providers/${validKind}/${p.id}`}
                 className="group"
               >
-                <div className="rounded-xl border border-border bg-bg-card p-3 hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer h-full flex flex-col gap-2">
+                <div className="rounded-xl border border-border bg-bg-card p-3 hover:bg-black/5 dark:hover:bg-white/5 hover:border-primary/40 transition-colors cursor-pointer h-full flex flex-col gap-2">
                   <div className="flex items-center gap-2">
                     <div
                       className="size-7 rounded-lg flex items-center justify-center shrink-0"
diff --git a/src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx b/src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx
index 47a8d1eb73..9a9256b9e7 100644
--- a/src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx
+++ b/src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx
@@ -231,7 +231,7 @@ export default function ProviderCard({
       <Link href={`/dashboard/providers/${providerId}`} className="group flex-1 flex flex-col">
         <Card
           padding="xs"
-          className={`h-full flex flex-col hover:bg-black/[0.01] dark:hover:bg-white/[0.01] transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""} ${provider.deprecated ? "opacity-60" : ""}`}
+          className={`h-full flex flex-col hover:bg-black/5 dark:hover:bg-white/5 hover:border-primary/40 transition-colors cursor-pointer ${allDisabled ? "opacity-50" : ""} ${provider.deprecated ? "opacity-60" : ""}`}
         >
           <div className="flex flex-col gap-2 h-full">
             {/* Row 1 — Identity: icon + full name + risk/category indicators */}
diff --git a/tests/unit/card-hover-visible.test.ts b/tests/unit/card-hover-visible.test.ts
new file mode 100644
index 0000000000..910fc15acf
--- /dev/null
+++ b/tests/unit/card-hover-visible.test.ts
@@ -0,0 +1,42 @@
+import test from "node:test";
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+
+// Regression guard: provider cards must have a *visible* hover state.
+//
+// Reported bug: hovering a provider card made it go "transparent / not
+// highlighted". Root cause was a 1%-opacity hover (`hover:bg-black/[0.01]` /
+// `hover:bg-white/[0.01]`) — effectively invisible. The fix switches both card
+// surfaces to the dashboard's dominant, visible hover (`hover:bg-*/5`) plus a
+// `hover:border-primary/40` highlight. This pins it so the near-invisible hover
+// can't silently come back.
+
+const ROOT = fileURLToPath(new URL("../../", import.meta.url));
+
+const CARD_FILES = [
+  "src/app/(dashboard)/dashboard/providers/components/ProviderCard.tsx",
+  "src/app/(dashboard)/dashboard/media-providers/[kind]/page.tsx",
+];
+
+for (const rel of CARD_FILES) {
+  test(`${rel}: card hover is visible, not near-transparent`, () => {
+    const src = readFileSync(ROOT + rel, "utf8");
+    assert.ok(
+      !src.includes("hover:bg-black/[0.01]"),
+      `${rel} still uses the near-invisible 1% hover (light)`
+    );
+    assert.ok(
+      !src.includes("hover:bg-white/[0.01]"),
+      `${rel} still uses the near-invisible 1% hover (dark)`
+    );
+    assert.ok(
+      src.includes("hover:bg-black/5") && src.includes("hover:bg-white/5"),
+      `${rel} should use a visible hover background (hover:bg-*/5)`
+    );
+    assert.ok(
+      src.includes("hover:border-primary/40"),
+      `${rel} should add a visible hover border highlight`
+    );
+  });
+}