Add tooltips to various components and improve styling for better user experience

app/src/modules/visualization/RealTimeVisulization.tsx

@@ -130,7 +130,6 @@ const RealTimeVisulization: React.FC = () => {
     });
   }, [selectedZone]);
 
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       const editWidgetOptions = document.querySelector(
@@ -179,12 +178,22 @@ const RealTimeVisulization: React.FC = () => {
       <style>
         {`
     :root {
-      --realTimeViz-container-width: ${canvasDimensions.width}px;
-      --realTimeViz-container-height: ${canvasDimensions.height}px;
+      --realTimeViz-container-width: ${canvasDimensions.width};
+      --realTimeViz-container-height: ${canvasDimensions.height};
     }
   `}
       </style>
-      <div ref={containerRef} className="realTime-viz">
+      <div
+        ref={containerRef}
+        className="realTime-viz"
+        style={{
+          height: isPlaying || activeModule !== "visualization" ? "100vh" : "",
+          width: isPlaying || activeModule !== "visualization" ? "100vw" : "",
+          left: isPlaying || activeModule !== "visualization" ? "0%" : "",
+          borderRadius:
+            isPlaying || activeModule !== "visualization" ? "" : "6px",
+        }}
+      >
         <div className="realTime-viz-wrapper">
           {openConfirmationPopup && (
             <RenderOverlay>