updated ui

app/src/components/ui/componets/DisplayZone.tsx

@@ -135,7 +135,11 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
   };
 
   return (
-    <div className="zone-wrapper">
+    <div
+      className={`zone-wrapper ${
+        selectedZone.activeSides.includes("bottom") && "bottom"
+      }`}
+    >
       {/* Left Arrow */}
       {showLeftArrow && (
         <button className="arrow left-arrow" onClick={handleScrollLeft}>
@@ -144,7 +148,12 @@ const DisplayZone: React.FC<DisplayZoneProps> = ({
       )}
 
       {/* Zones Wrapper */}
-      <div ref={containerRef} className="zones-wrapper">
+      <div
+        ref={containerRef}
+        className={`zones-wrapper ${
+          selectedZone.activeSides.includes("bottom") && "bottom"
+        }`}
+      >
         {Object.keys(zonesData).map((zoneName, index) => (
           <div
             key={index}

app/src/components/ui/componets/RealTimeVisulization.tsx

@@ -154,22 +154,22 @@ const RealTimeVisulization: React.FC = () => {
 
   useEffect(() => {}, [zonesData]);
 
-  // useEffect(() => {
+  useEffect(() => {
-  //   setZonesData((prev) => {
+    setZonesData((prev) => {
-  //     if (!selectedZone) return prev;
+      if (!selectedZone) return prev;
 
-  //     return {
+      return {
-  //       ...prev,
+        ...prev,
-  //       [selectedZone.zoneName]: {
+        [selectedZone.zoneName]: {
-  //         ...prev[selectedZone.zoneName], // Keep existing properties
+          ...prev[selectedZone.zoneName], // Keep existing properties
-  //         activeSides: selectedZone.activeSides || [],
+          activeSides: selectedZone.activeSides || [],
-  //         panelOrder: selectedZone.panelOrder || [],
+          panelOrder: selectedZone.panelOrder || [],
-  //         lockedPanels: selectedZone.lockedPanels || [],
+          lockedPanels: selectedZone.lockedPanels || [],
-  //         widgets: selectedZone.widgets || [],
+          widgets: selectedZone.widgets || [],
-  //       },
+        },
-  //     };
+      };
-  //   });
+    });
-  // }, [selectedZone]);
+  }, [selectedZone]);
 
   return (
     <div