From b26a0cd6cd9a3e32d835c2d50d49ad90d6bdeaf7 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Wed, 7 May 2025 10:33:44 +0530
Subject: [PATCH] Fix CSS property naming and improve distance label formatting
 in DistanceLines component

---
 .../visualization/widgets/floating/DistanceLines.tsx  |  8 ++++----
 app/src/styles/layout/sidebar.scss                    | 11 +++--------
 app/src/styles/pages/realTimeViz.scss                 |  3 +--
 3 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/src/modules/visualization/widgets/floating/DistanceLines.tsx b/app/src/modules/visualization/widgets/floating/DistanceLines.tsx
index 62cfd3b..35d6943 100644
--- a/app/src/modules/visualization/widgets/floating/DistanceLines.tsx
+++ b/app/src/modules/visualization/widgets/floating/DistanceLines.tsx
@@ -41,7 +41,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(-50%,0%)",
               }}
             >
-              {obj.position.top}px
+              {obj.position.top.toFixed(1)}px
             </span>
           </div>
         )}
@@ -67,7 +67,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(-50%,0%)",
               }}
             >
-              {obj.position.bottom}px
+              {obj.position.bottom.toFixed(1)}px
             </span>
           </div>
         )}
@@ -93,7 +93,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(0,-50%)",
               }}
             >
-              {obj.position.left}px
+              {obj.position.left.toFixed(1)}px
             </span>
           </div>
         )}
@@ -119,7 +119,7 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
                 transform: "translate(0,-50%)",
               }}
             >
-              {obj.position.right}px
+              {obj.position.right.toFixed(1)}px
             </span>
           </div>
         )}
diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss
index e01af76..bb43230 100644
--- a/app/src/styles/layout/sidebar.scss
+++ b/app/src/styles/layout/sidebar.scss
@@ -440,7 +440,7 @@
 
                 path {
                   stroke: var(--text-button-color);
-                  strokeWidth: 1.3;
+                  stroke-width: 1.3;
                 }
               }
             }
@@ -710,7 +710,7 @@
 
         path {
           stroke: var(--accent-color);
-          strokeWidth: 1.5px;
+          stroke-width: 1.5px;
         }
 
         &:hover {
@@ -1397,14 +1397,10 @@
 
 .skeleton-wrapper {
   display: flex;
-
-  .skeleton-content {}
-
   .asset-name {
     width: 40%;
     height: 10px;
   }
-
   .asset {
     width: 100%;
     height: 100%;
@@ -1417,8 +1413,7 @@
 .sidebar-left-wrapper,
 .sidebar-right-wrapper {
   height: calc(50vh + 150px);
-  overflow-y: hidden;
-  transition: height 0.4s ease-in-out;
+  transition: height 0.2s ease-in-out;
 }
 
 .sidebar-left-wrapper.closed,
diff --git a/app/src/styles/pages/realTimeViz.scss b/app/src/styles/pages/realTimeViz.scss
index b3eafc2..a127ec2 100644
--- a/app/src/styles/pages/realTimeViz.scss
+++ b/app/src/styles/pages/realTimeViz.scss
@@ -65,7 +65,6 @@
 
     overflow: auto;
     max-width: calc(100% - 500px);
-    // min-width: 150px;
     z-index: 3;
     transform: translate(-50%, -10%);
     pointer-events: all;
@@ -431,7 +430,7 @@
 
       path {
         stroke: #f65648;
-        strokewidth: 1.3;
+        stroke-width: 1.3;
       }
     }
   }