From 80e350549cea175056e060e736dc72137649da16 Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 15 Oct 2026 18:19:41 +0200
Subject: [PATCH] A dashboard's portalled select menu restates its look, so a
 Glass menu blurs what is under it (the colour wheel no longer shows through)
 and a Material menu gets its tonal fill back

---
 frontend/src/components/Dashboard/ui/fluksio/Controls.tsx | 8 +++++---
 frontend/src/components/Dashboard/ui/glass/Controls.tsx   | 8 +++++---
 .../src/components/Dashboard/ui/material/Controls.tsx     | 8 +++++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Dashboard/ui/fluksio/Controls.tsx b/frontend/src/components/Dashboard/ui/fluksio/Controls.tsx
index d89901b..f689e98 100644
--- a/frontend/src/components/Dashboard/ui/fluksio/Controls.tsx
+++ b/frontend/src/components/Dashboard/ui/fluksio/Controls.tsx
@@ -154,9 +154,10 @@ export function Select({
   onChange,
 }: SelectProps) {
   // The menu is portalled to `body`, which is outside the canvas — so it
-  // re-states the dashboard's own theme and colours rather than borrowing the
-  // app's.
-  const { style, theme } = useLook()
+  // re-states the dashboard's own theme, colours and look rather than
+  // borrowing the app's. The look carries the variables its menu is painted
+  // with: without it a glass menu has no blur, and the tile under it shows.
+  const { style, theme, look } = useLook()
   return (
     <SelectPrimitive.Root
       value={value}
@@ -179,6 +180,7 @@ export function Select({
           position="popper"
           sideOffset={4}
           style={style}
+          data-look={look}
           className={cn(
             theme,
             "fx-menu z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-y-auto p-1 data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0",
diff --git a/frontend/src/components/Dashboard/ui/glass/Controls.tsx b/frontend/src/components/Dashboard/ui/glass/Controls.tsx
index 6661c59..fb36269 100644
--- a/frontend/src/components/Dashboard/ui/glass/Controls.tsx
+++ b/frontend/src/components/Dashboard/ui/glass/Controls.tsx
@@ -172,9 +172,10 @@ export function Select({
   onChange,
 }: SelectProps) {
   // The menu is portalled to `body`, which is outside the canvas — so it
-  // re-states the dashboard's own theme and colours rather than borrowing the
-  // app's.
-  const { style, theme } = useLook()
+  // re-states the dashboard's own theme, colours and look rather than
+  // borrowing the app's. The look carries the variables its menu is painted
+  // with: without it a glass menu has no blur, and the tile under it shows.
+  const { style, theme, look } = useLook()
   return (
     <SelectPrimitive.Root
       value={value}
@@ -201,6 +202,7 @@ export function Select({
           position="popper"
           sideOffset={4}
           style={style}
+          data-look={look}
           className={cn(
             theme,
             "gl-menu z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-y-auto p-1 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
diff --git a/frontend/src/components/Dashboard/ui/material/Controls.tsx b/frontend/src/components/Dashboard/ui/material/Controls.tsx
index 7861c4a..c4461a2 100644
--- a/frontend/src/components/Dashboard/ui/material/Controls.tsx
+++ b/frontend/src/components/Dashboard/ui/material/Controls.tsx
@@ -199,9 +199,10 @@ export function Select({
   onChange,
 }: SelectProps) {
   // The menu is portalled to `body`, which is outside the canvas — so it
-  // re-states the dashboard's own theme and colours rather than borrowing the
-  // app's.
-  const { style, theme } = useLook()
+  // re-states the dashboard's own theme, colours and look rather than
+  // borrowing the app's. The look carries the variables its menu is painted
+  // with: without it a glass menu has no blur, and the tile under it shows.
+  const { style, theme, look } = useLook()
   return (
     <SelectPrimitive.Root
       value={value}
@@ -227,6 +228,7 @@ export function Select({
           position="popper"
           sideOffset={4}
           style={style}
+          data-look={look}
           className={cn(
             theme,
             "m3-menu z-50 max-h-64 min-w-[var(--radix-select-trigger-width)] overflow-y-auto p-1 data-[state=open]:animate-in data-[state=open]:zoom-in-95 data-[state=open]:fade-in-0",