Refactor UI components and styles for improved layout and consistency

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

@@ -20,21 +20,31 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
 
   return (
     <>
-      {activeEdges.vertical === "top" && typeof obj.position.top === "number" && (
-        <div
-          className="distance-line top"
-          style={{
-            top: 0,
-            left:
-              activeEdges.horizontal === "left"
-                ? `${(obj.position.left as number) + 125}px`
-                : `calc(100% - ${(obj.position.right as number) + 125}px)`,
-            height: `${obj.position.top}px`,
-          }}
-        >
-          <span className="distance-label">{obj.position.top.toFixed()}px</span>
-        </div>
-      )}
+      {activeEdges.vertical === "top" &&
+        typeof obj.position.top === "number" && (
+          <div
+            className="distance-line top"
+            style={{
+              top: 0,
+              left:
+                activeEdges.horizontal === "left"
+                  ? `${(obj.position.left as number) + 125}px`
+                  : `calc(100% - ${(obj.position.right as number) + 125}px)`,
+              height: `${obj.position.top}px`,
+            }}
+          >
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                top: "50%",
+                transform: "translate(-50%,0%)",
+              }}
+            >
+              {obj.position.top}px
+            </span>
+          </div>
+        )}
 
       {activeEdges.vertical === "bottom" &&
         typeof obj.position.bottom === "number" && (
@@ -49,7 +59,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               height: `${obj.position.bottom}px`,
             }}
           >
-            <span className="distance-label">{obj.position.bottom.toFixed()}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                bottom: "50%",
+                transform: "translate(-50%,0%)",
+              }}
+            >
+              {obj.position.bottom}px
+            </span>
           </div>
         )}
 
@@ -66,7 +85,16 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               width: `${obj.position.left}px`,
             }}
           >
-            <span className="distance-label">{obj.position.left.toFixed()}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                left: "50%",
+                transform: "translate(0,-50%)",
+              }}
+            >
+              {obj.position.left}px
+            </span>
           </div>
         )}
 
@@ -83,11 +111,20 @@ const DistanceLines: React.FC<DistanceLinesProps> = ({ obj, activeEdges }) => {
               width: `${obj.position.right}px`,
             }}
           >
-            <span className="distance-label">{obj.position.right.toFixed()}px</span>
+            <span
+              className="distance-label"
+              style={{
+                position: "absolute",
+                right: "50%",
+                transform: "translate(0,-50%)",
+              }}
+            >
+              {obj.position.right}px
+            </span>
           </div>
         )}
     </>
   );
 };
 
-export default DistanceLines;
+export default DistanceLines;

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

@@ -386,7 +386,6 @@ const DroppedObjects: React.FC = () => {
               <FleetEfficiencyComponent object={obj} />
             </>
           ) : null}
-          {renderObjectContent(obj)}
           <div
             className="icon kebab"
             onClick={(event) => handleKebabClick(obj.id, event)}