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

@@ -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",

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",

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",