From c031d90a072df884bc61262dd9d6dfe87e04eff2 Mon Sep 17 00:00:00 2001
From: Wytamma Wirth <wytamma.wirth@me.com>
Date: Thu, 25 Apr 2024 18:28:28 +1000
Subject: [PATCH] :lipstick: slimer burn-in slider

---
 frontend/src/components/data/TraceList.vue | 34 ++++++++++++++--------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/data/TraceList.vue b/frontend/src/components/data/TraceList.vue
index 8f16796..5e6b6a9 100644
--- a/frontend/src/components/data/TraceList.vue
+++ b/frontend/src/components/data/TraceList.vue
@@ -82,20 +82,24 @@
 
           </template>
           <div style="overflow-x: hidden !important; overflow-y: auto !important;" v-if="openTraceID === trace.id && activeTraceIDs.includes(trace.id)">
-            <v-col class=" mr-4 mb-0">
-              <div>Burn-in {{burnIn[trace.id]}}%</div>
-              <v-slider
-                v-on:change="setBurnIn($event, trace.id)"
-                v-model="burnIn[trace.id]"
-                class="align-center"
-                :max="100"
-                :min="0"
-                hide-details
-              > 
-                </v-slider>
-            </v-col>
+            <div class="my-3 mx-2">
+              <div class="d-flex align-center">
+                <div>Burn-in</div>
+                <v-slider
+                  v-on:change="setBurnIn($event, trace.id)"
+                  v-model="burnIn[trace.id]"
+                  :max="99"
+                  :min="0"
+
+                  hide-details
+                ></v-slider>
+                <span class="fixed-width">{{burnIn[trace.id]}}</span>%
+              </div>
+            </div>
             <v-divider class="my-0"></v-divider>
             <div style="overflow-x:hidden" >
+              <div>
+              </div>
               <ParamsPanel :trace="trace" height="400px" />
             </div>
             
@@ -126,6 +130,12 @@
   -ms-overflow-style: none;  /* IE and Edge */
   scrollbar-width: none;  /* Firefox */
 }
+.fixed-width {
+    display: inline-block;
+    width: 1.2em;  /* Adjust this width to fit your content */
+    text-align: right;
+}
+
 </style>
 
 <script lang="ts">