Bug Fixes:

- Zone Selection Panel moves to the bottom when the bottom panel is hidden.
- Zone Selection Panel gets hidden by 3D widgets when switching zones.
- Template image not rendering on the Template page despite being saved.

app/src/styles/components/input.scss

@@ -45,6 +45,7 @@ input {
 .toggle-header-container {
   @include flex-center;
   padding: 6px 12px;
+  margin: 6px 0;
 
   .toggle-header-item {
     width: 100%;
@@ -553,6 +554,7 @@ input {
     .input-value {
       width: 42px;
       text-align: center;
+
       &::-webkit-inner-spin-button,
       &::-webkit-outer-spin-button {
         -webkit-appearance: none;
@@ -654,4 +656,4 @@ input {
   .multi-email-invite-input.active {
     border: 1px solid var(--accent-color);
   }
-}
+}

app/src/styles/layout/sidebar.scss

@@ -66,9 +66,9 @@
     .sidebar-left-content-container {
       border-bottom: 1px solid var(--border-color);
       // flex: 1;
-      height: calc(100% - 36px);
+      // height: calc(100% - 36px);
       position: relative;
-      overflow: auto;
+      // overflow: auto;
 
       .template-list {
         display: flex;
@@ -78,19 +78,19 @@
         min-height: 50vh;
         max-height: 60vh;
       }
-      
+
       .template-item {
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         padding: 1rem;
         transition: box-shadow 0.3s ease;
       }
-      
+
       .template-image-container {
         position: relative;
         padding-bottom: 56.25%; // 16:9 aspect ratio
       }
-      
+
       .template-image {
         position: absolute;
         width: 100%;
@@ -100,19 +100,19 @@
         cursor: pointer;
         transition: transform 0.3s ease;
       }
-      
+
       .template-details {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-top: 0.5rem;
       }
-      
+
       .template-name {
         cursor: pointer;
         font-weight: 500;
       }
-      
+
       .delete-button {
         padding: 0.25rem 0.5rem;
         background: #ff4444;
@@ -122,18 +122,22 @@
         cursor: pointer;
         transition: opacity 0.3s ease;
       }
-      
+
       .no-templates {
         text-align: center;
         color: #666;
         padding: 2rem;
         grid-column: 1 / -1;
       }
-      
+
 
       .widget-left-sideBar {
-        min-height: 50vh;
-        max-height: 60vh;
+        .widgets-wrapper {
+
+          min-height: 50vh;
+          max-height: 60vh;
+          overflow: auto;
+        }
 
         .widget2D {
           overflow: auto;

app/src/styles/pages/realTimeViz.scss

@@ -365,7 +365,7 @@
 
   .panel.hidePanel {
     pointer-events: none;
-    opacity: 0.1;
+    opacity: 0;
   }
 }