Used fixed size for colour picker.

packages/client/src/components/dashboard/controls/EntityDashboard.css

@@ -15,12 +15,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  backdrop-filter: blur(15px);
 }
 
 .hp-entity-dashboard {
   position: relative;
   background-color: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(10px);
   background-clip: padding-box;
   pointer-events: auto;
   padding: 0;
@@ -104,6 +104,10 @@
   word-wrap: break-word;
   flex: 1;
   overflow: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .hp-entity-dashboard-content {

packages/client/src/components/dashboard/controls/EntityDashboards/LightEntityDashboard.css

@@ -6,7 +6,6 @@
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
   flex-direction: column;
-  height: 100%;
 }
 
 /* Controls container - color wheel and brightness slider side by side */

packages/client/src/components/dashboard/controls/EntityDashboards/LightEntityDashboard.jsx

@@ -15,7 +15,7 @@ export const LightEntityDashboard = ({ entity }) => {
   const [localBrightness, setLocalBrightness] = useState(255);
   const brightnessTimeoutRef = useRef(null);
   const colorTimeoutRef = useRef(null);
-  const [maxHeight, setMaxHeight] = useState(0);
+  const maxHeight = 480;
 
   if (!entity) return null;
 
@@ -46,7 +46,11 @@ export const LightEntityDashboard = ({ entity }) => {
       });
       setHsva(newHsva);
     }
-  }, [rgbColor ? rgbColor.r : undefined, rgbColor ? rgbColor.g : undefined, rgbColor ? rgbColor.b : undefined]);
+  }, [
+    rgbColor ? rgbColor.r : undefined,
+    rgbColor ? rgbColor.g : undefined,
+    rgbColor ? rgbColor.b : undefined,
+  ]);
 
   useEffect(() => {
     setLocalBrightness(brightness);
@@ -109,22 +113,6 @@ export const LightEntityDashboard = ({ entity }) => {
   const currentRgba = hsvaToRgba(hsva);
   const colorStyle = `rgb(${currentRgba.r}, ${currentRgba.g}, ${currentRgba.b})`;
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (dashboardRef.current) {
-        setMaxHeight(dashboardRef.current.clientHeight);
-      }
-    }, 10);
-    const intervalId = setInterval(() => {
-      if (dashboardRef.current) {
-        setMaxHeight(dashboardRef.current.clientHeight);
-      }
-    }, 100);
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, []);
-
   return (
     <div className="light-entity-dashboard" ref={dashboardRef}>
       <div className="light-entity-dashboard-controls">