Fixed dashboard height.

packages/client/src/components/admin/controls/AnimatedOutlet.jsx

@@ -19,7 +19,7 @@ function AnimatedOutlet() {
     // Check if pathname actually changed
     if (location.pathname !== prevPathnameRef.current && outlet) {
       // If we're already transitioning, wait for it to complete
-      if (isTransitioningRef.current) {
+      if (isTransitioningRef.current == true) {
         console.log("already transitioning, waiting for it to complete");
         return;
       }
@@ -72,12 +72,19 @@ function AnimatedOutlet() {
     };
   }, [location.pathname, outlet, activeOutlet, navigationType]);
 
+  useEffect(() => {
+    setIsTransitioning(false);
+    isTransitioningRef.current = false;
+  }, [setIsTransitioning]);
+
   // Determine classes for each outlet
   const getOutlet1Class = () => {
     if (!outlet1) return "";
     const baseClass = isReversed ? "reverse" : "";
-    if (isTransitioning && activeOutlet === 1) return `exit ${baseClass}`.trim();
-    if (isTransitioning && activeOutlet === 2) return `enter ${baseClass}`.trim();
+    if (isTransitioning && activeOutlet === 1)
+      return `exit ${baseClass}`.trim();
+    if (isTransitioning && activeOutlet === 2)
+      return `enter ${baseClass}`.trim();
     if (activeOutlet === 1) return "visible";
     return "";
   };
@@ -85,8 +92,10 @@ function AnimatedOutlet() {
   const getOutlet2Class = () => {
     if (!outlet2) return "";
     const baseClass = isReversed ? "reverse" : "";
-    if (isTransitioning && activeOutlet === 2) return `exit ${baseClass}`.trim();
-    if (isTransitioning && activeOutlet === 1) return `enter ${baseClass}`.trim();
+    if (isTransitioning && activeOutlet === 2)
+      return `exit ${baseClass}`.trim();
+    if (isTransitioning && activeOutlet === 1)
+      return `enter ${baseClass}`.trim();
     if (activeOutlet === 2) return "visible";
     return "";
   };
@@ -94,14 +103,10 @@ function AnimatedOutlet() {
   return (
     <div className="animated-outlet-container">
       {outlet1 && (
-        <div className={`animated-outlet ${getOutlet1Class()}`}>
-          {outlet1}
-        </div>
+        <div className={`animated-outlet ${getOutlet1Class()}`}>{outlet1}</div>
       )}
       {outlet2 && (
-        <div className={`animated-outlet ${getOutlet2Class()}`}>
-          {outlet2}
-        </div>
+        <div className={`animated-outlet ${getOutlet2Class()}`}>{outlet2}</div>
       )}
     </div>
   );

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(15px);
   background-clip: padding-box;
   pointer-events: auto;
   padding: 0;

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

@@ -16,7 +16,7 @@ export const LightEntityDashboard = ({ entity }) => {
   const [localBrightness, setLocalBrightness] = useState(255);
   const brightnessTimeoutRef = useRef(null);
   const colorTimeoutRef = useRef(null);
-  const [maxHeight, setMaxHeight] = useState(0);
+  const DASHBOARD_HEIGHT = 460;
   const isUpdatingFromEntity = useRef(false);
 
   if (!entity) return null;
@@ -105,25 +105,9 @@ export const LightEntityDashboard = ({ entity }) => {
     };
   }, []);
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (dashboardRef.current) {
-        setMaxHeight(dashboardRef.current.clientHeight);
-      }
-    }, 10);
-    const intervalId = setInterval(() => {
-      if (dashboardRef.current) {
-        setMaxHeight(dashboardRef.current.clientHeight);
-      }
-    }, 100);
-    return () => {
-      clearInterval(intervalId);
-    };
-  }, []);
-
   // Initialize iro.js color picker with wheel and value slider
   useEffect(() => {
-    if (!colorPickerRef.current || !supportsColor || maxHeight === 0) return;
+    if (!colorPickerRef.current || !supportsColor) return;
 
     // Destroy existing instance if any
     if (colorPickerInstanceRef.current) {
@@ -133,7 +117,7 @@ export const LightEntityDashboard = ({ entity }) => {
 
     // Create new color picker with wheel and value slider
     const colorPicker = new iro.ColorPicker(colorPickerRef.current, {
-      width: maxHeight,
+      width: DASHBOARD_HEIGHT,
       color: rgbColor
         ? { r: rgbColor.r, g: rgbColor.g, b: rgbColor.b }
         : { r: 255, g: 255, b: 255 },
@@ -168,12 +152,15 @@ export const LightEntityDashboard = ({ entity }) => {
         colorPickerInstanceRef.current.off("color:change", handleColorChange);
       }
     };
-  }, [supportsColor, maxHeight, handleColorChange]);
+  }, [supportsColor, handleColorChange]);
 
   return (
-    <div className="light-entity-dashboard" ref={dashboardRef}>
+    <div
+      className="light-entity-dashboard"
+      ref={dashboardRef}
+      style={{ height: DASHBOARD_HEIGHT }}
+    >
       <div className="light-entity-dashboard-controls">
-        <p>{maxHeight}</p>
         {/* Color Wheel with Value Slider */}
         {supportsColor && (
           <div