From b42a3138256f100be98682437f0f90d9af9c191e Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Fri, 17 Jul 2026 18:10:52 +0200
Subject: [PATCH] Fix transparent admin Select/Popover overlays and semantic
 surface tokens.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 src/app/globals.css          | 62 +++++++++++++++++++++++++++++++++++-
 src/components/ui/dialog.tsx |  2 +-
 src/components/ui/select.tsx |  4 +--
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index fe19cd9c..8e12066a 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,7 +22,22 @@
 :root {
 	--color-primary: #eeb425;
 	--color-primary-hover: #d4a01f;
+	--color-primary-foreground: #1a1a2e;
 	--color-background: #f4f6f9;
+	--color-foreground: #0f172a;
+	--color-card: #ffffff;
+	--color-card-foreground: #0f172a;
+	--color-popover: #ffffff;
+	--color-popover-foreground: #0f172a;
+	--color-secondary: #f1f5f9;
+	--color-secondary-foreground: #0f172a;
+	--color-muted: #f1f5f9;
+	--color-muted-foreground: #6b7280;
+	--color-destructive: #ef4444;
+	--color-destructive-foreground: #ffffff;
+	--color-border: #e2e8f0;
+	--color-input: #e2e8f0;
+	--color-ring: #eeb425;
 	--color-surface: #ffffff;
 	--color-dropdown: #ffffff;
 	--color-navbar: #ffffff;
@@ -37,6 +52,7 @@
 	--color-accent-foreground-readable: #000000;
 	--color-navbar-text-readable: #1e293b;
 	--color-accent: #10b981;
+	--color-accent-foreground: #000000;
 	--color-success: #16a34a;
 	--color-warning: #eab308;
 	--color-error: #ef4444;
@@ -1197,7 +1213,7 @@ body:has([data-admin]) {
 	--color-foreground: var(--admin-text);
 	--color-card: var(--admin-surface);
 	--color-card-foreground: var(--admin-text);
-	--color-popover: var(--admin-surface);
+	--color-popover: var(--admin-surface-elevated);
 	--color-popover-foreground: var(--admin-text);
 	--color-primary: var(--admin-accent);
 	--color-primary-hover: color-mix(in srgb, var(--admin-accent) 84%, #000000);
@@ -1287,6 +1303,50 @@ html.dark body:has([data-admin]) textarea {
 	color: var(--admin-text);
 }
 
+/* Opaque floating surfaces for Radix portals (Select / Dropdown / Popover / Dialog).
+   Without this, bg-popover can resolve transparent and lists paint over forms. */
+body:has([data-admin]) [data-slot="select-content"],
+body:has([data-admin]) [data-slot="dropdown-menu-content"],
+body:has([data-admin]) [data-slot="dropdown-menu-sub-content"],
+body:has([data-admin]) [data-slot="popover-content"],
+body:has([data-admin]) [data-slot="context-menu-content"],
+body:has([data-admin]) [data-slot="dialog-content"],
+body:has([data-admin]) [data-slot="sheet-content"] {
+	background-color: var(--admin-surface-elevated);
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+	box-shadow:
+		0 18px 48px rgba(0, 0, 0, 0.45),
+		0 4px 12px rgba(0, 0, 0, 0.25);
+}
+
+body:has([data-admin]) [data-slot="select-trigger"],
+body:has([data-admin]) [data-slot="dropdown-menu-trigger"] {
+	background-color: var(--admin-surface-elevated);
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+}
+
+body:has([data-admin]) [data-slot="select-item"][data-highlighted],
+body:has([data-admin]) [data-slot="select-item"]:focus,
+body:has([data-admin]) [data-slot="dropdown-menu-item"][data-highlighted],
+body:has([data-admin]) [data-slot="dropdown-menu-item"]:focus,
+body:has([data-admin]) [data-slot="context-menu-item"][data-highlighted],
+body:has([data-admin]) [data-slot="context-menu-item"]:focus {
+	background-color: color-mix(
+		in srgb,
+		var(--admin-accent) 18%,
+		var(--admin-surface-elevated)
+	);
+	color: var(--admin-text);
+}
+
+body:has([data-admin]) [data-slot="card"] {
+	background-color: var(--admin-surface);
+	color: var(--admin-text);
+	border-color: var(--admin-border);
+}
+
 /* ── Details/summary open states for nav ──────────────────── */
 details[open] > summary .details-open\:hidden {
 	display: none;
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index cd6bcd24..dfa6690e 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -60,7 +60,7 @@ function DialogContent({
 			<DialogPrimitive.Content
 				data-slot="dialog-content"
 				className={cn(
-					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+					"bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
 					className,
 				)}
 				{...props}
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 7474c20e..cda53204 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -37,7 +37,7 @@ function SelectTrigger({
 			data-slot="select-trigger"
 			data-size={size}
 			className={cn(
-				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				"border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-background dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
@@ -53,7 +53,7 @@ function SelectTrigger({
 function SelectContent({
 	className,
 	children,
-	position = "item-aligned",
+	position = "popper",
 	align = "center",
 	...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {