updated visualization panel ui and added outer click

app/src/styles/layout/sidebar.scss

@@ -70,6 +70,67 @@
       position: relative;
       overflow: auto;
 
+      .template-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+        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%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 4px;
+        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;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        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;

app/src/styles/pages/realTimeViz.scss

@@ -24,9 +24,17 @@
   }
 
   .floating {
-    width: 100%;
-    max-width: 250px;
-    min-height: 83px;
+
+
+    width: calc(var(--realTimeViz-container-width) * 0.2);
+    height: calc(var(--realTimeViz-container-width) * 0.05);
+
+    min-width: 250px;
+    max-width: 300px;
+
+    min-height: 83px !important;
+    // max-height: 100px !important;
+
     background: var(--background-color);
     border: 1.23px solid var(--border-color);
     box-shadow: 0px 4.91px 4.91px 0px #0000001c;
@@ -60,9 +68,8 @@
     display: flex;
     background-color: var(--background-color);
     position: absolute;
-    bottom: 10px;
+    // bottom: 10px;
     left: 50%;
-    transform: translate(-50%, 0);
     gap: 6px;
 
     border-radius: 8px;
@@ -70,6 +77,7 @@
     overflow: auto;
     max-width: calc(100% - 500px);
     z-index: 3;
+    transform: translate(-50%, -100%);
 
     &::-webkit-scrollbar {
       display: none;
@@ -116,8 +124,8 @@
   }
 
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.27);
-    bottom: 200px;
+    top: var(--bottomWidth);
+    // bottom: 200px;
   }
 
   .content-container {
@@ -138,7 +146,7 @@
       display: flex;
       background-color: rgba(224, 223, 255, 0.5);
       position: absolute;
-      bottom: 10px;
+      // bottom: 10px;
       left: 50%;
       transform: translate(-50%, 0);
       gap: 6px;
@@ -203,9 +211,9 @@
 
       .chart-container {
         width: 100%;
-        min-height: 150px;
+
         max-height: 100%;
-        // border: 1px dashed var(--background-color-gray);
+        border: 1px dashed var(--background-color-gray);
         border-radius: 8px;
         box-shadow: var(--box-shadow-medium);
         padding: 6px 0;
@@ -306,7 +314,6 @@
         min-height: 150px;
 
         .chart-container {
-
           min-width: 160px;
         }
       }
@@ -324,14 +331,12 @@
       left: 0;
       top: 0;
       bottom: 0;
-
-
     }
 
     &.right-panel {
       right: 0;
       top: 0;
-      bottom: 0
+      bottom: 0;
     }
 
     &.left-panel,
@@ -342,12 +347,11 @@
         flex-direction: column;
         width: 100%;
 
-
         gap: 6px;
 
         .chart-container {
           width: 100%;
-          min-height: 160px;
+          min-height: 150px;
           max-height: 100%;
           border-radius: 8px;
           box-shadow: var(--box-shadow-medium);
@@ -355,8 +359,6 @@
           background-color: var(--background-color);
           position: relative;
         }
-
-
       }
     }
   }
@@ -368,8 +370,8 @@
 
 .playingFlase {
   .zone-wrapper.bottom {
-    bottom: calc(var(--realTimeViz-container-height) * 0.3);
-    bottom: 210px;
+    top: var(--bottomWidth);
+    // bottom: 210px;
   }
 }
 
@@ -658,9 +660,6 @@
         }
       }
     }
-
-
-
   }
 }
 
@@ -756,14 +755,13 @@
 }
 
 .connectionSuccess {
-  outline-color: #43C06D;
+  outline-color: #43c06d;
 }
 
 .connectionFails {
   outline-color: #ffe3e0;
 }
 
-
 .editWidgetOptions {
   position: absolute;
   // top: 50%;