From d9a971ce98290c0e7bb072c180171b5d0925eac7 Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Wed, 13 Sep 2023 16:32:29 -0300
Subject: [PATCH] Use monospace font on `DepthIndicator`

This way the sensor value does not affect the widget size.
---
 src/components/mini-widgets/DepthIndicator.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/mini-widgets/DepthIndicator.vue b/src/components/mini-widgets/DepthIndicator.vue
index 467e41493..fa02f0d4c 100644
--- 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>