Use monospace font on DepthIndicator

This way the sensor value does not affect the widget size.
bluerobotics · Sep 13, 2023 · a3c2db8 · a3c2db8
1 parent 355b326
commit a3c2db8
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/src/components/mini-widgets/DepthIndicator.vue b/src/components/mini-widgets/DepthIndicator.vue
@@ -2,7 +2,10 @@
   <div class="flex items-center w-fit min-w-[8rem] max-w-[9rem] h-12 p-1 text-white justify-center">
     <img src="@/assets/depth-icon.svg" class="h-full" :draggable="false" />
     <div class="flex flex-col items-start justify-center ml-1 min-w-[4rem] max-w-[6rem] select-none">
-      <span class="text-xl font-semibold leading-6 w-fit">{{ round(averageDepth, 2) }} m</span>
+      <div>
+        <span class="font-mono text-xl font-semibold leading-6 w-fit">{{ round(averageDepth, 2) }}</span>
+        <span class="text-xl font-semibold leading-6 w-fit"> m</span>
+      </div>
       <span class="w-full text-sm font-semibold leading-4 whitespace-nowrap">Depth</span>
     </div>
   </div>