From d545480e7dd2af0215e892c2a671f856967181cb Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Tue, 20 Feb 2024 12:12:10 +0000
Subject: [PATCH] Tidy up numeric filters (#2054)

---
 .../viewer/explorer/NumericFilter.vue         | 64 ++++++++++---------
 1 file changed, 34 insertions(+), 30 deletions(-)

diff --git a/packages/frontend-2/components/viewer/explorer/NumericFilter.vue b/packages/frontend-2/components/viewer/explorer/NumericFilter.vue
index 4fdc7fcba9..d0b4ef97c7 100644
--- a/packages/frontend-2/components/viewer/explorer/NumericFilter.vue
+++ b/packages/frontend-2/components/viewer/explorer/NumericFilter.vue
@@ -7,41 +7,45 @@
     </div>
     <div class="flex flex-col space-y-2">
       <div class="flex items-center justify-between w-full">
-        <div>
+        <div class="flex flex-col gap-2">
           <label class="text-xs text-foreground-2 mr-2" for="min">Min</label>
-          <input
-            id="min"
-            v-model="passMin"
-            class="h-2 mr-2"
-            type="range"
-            name="min"
-            :min="props.filter.min"
-            :max="props.filter.max"
-            step="0.0001"
-            @change="setFilterPass()"
-          />
-        </div>
-        <div class="text-xs text-foreground-2 truncate min-w-0">
-          {{ roundedValues.min }}
+          <div class="flex gap-2 items-center">
+            <input
+              id="min"
+              v-model="passMin"
+              class="h-2 mr-2"
+              type="range"
+              name="min"
+              :min="props.filter.min"
+              :max="props.filter.max"
+              step="0.0001"
+              @change="setFilterPass()"
+            />
+            <div class="text-xs text-foreground-2 truncate min-w-0">
+              {{ roundedValues.min }}
+            </div>
+          </div>
         </div>
       </div>
       <div class="flex items-center justify-between w-full">
-        <div class="flex items-center">
+        <div class="flex flex-col gap-2">
           <label class="text-xs text-foreground-2 mr-2" for="max">Max</label>
-          <input
-            id="max"
-            v-model="passMax"
-            class="h-2 mr-2"
-            type="range"
-            name="max"
-            :min="props.filter.min"
-            :max="props.filter.max"
-            step="0.0001"
-            @change="setFilterPass()"
-          />
-        </div>
-        <div class="text-xs text-foreground-2 truncate min-w-0">
-          {{ roundedValues.max }}
+          <div class="flex gap-2 items-center">
+            <input
+              id="max"
+              v-model="passMax"
+              class="h-2 mr-2"
+              type="range"
+              name="max"
+              :min="props.filter.min"
+              :max="props.filter.max"
+              step="0.0001"
+              @change="setFilterPass()"
+            />
+            <div class="text-xs text-foreground-2 truncate min-w-0 max-w-12">
+              {{ roundedValues.max }}
+            </div>
+          </div>
         </div>
       </div>
     </div>