From 0122c4da4b2cdabd0fed830f27fbec0caa24071d Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Thu, 5 Jan 2023 21:31:15 +0800
Subject: [PATCH] Add bottom margin to Slider interface to account for field
 note (#17024)

* add margin when thumb label is always visible

* add z-index to thumb label for field note

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>
---
 app/src/components/v-slider.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/src/components/v-slider.vue b/app/src/components/v-slider.vue
index 23e6cf7f35..44f2b89d42 100644
--- a/app/src/components/v-slider.vue
+++ b/app/src/components/v-slider.vue
@@ -3,7 +3,7 @@
 		<div v-if="$slots.prepend" class="prepend">
 			<slot name="prepend" :value="modelValue" />
 		</div>
-		<div class="slider" :class="{ disabled }">
+		<div class="slider" :class="{ disabled, 'thumb-label-visible': showThumbLabel && alwaysShowValue }">
 			<input
 				:disabled="disabled"
 				type="range"
@@ -113,6 +113,10 @@ body {
 			--v-slider-fill-color: var(--foreground-subdued);
 		}
 
+		&.thumb-label-visible {
+			margin-bottom: 30px;
+		}
+
 		input {
 			width: 100%;
 			height: 4px;
@@ -219,6 +223,7 @@ body {
 		}
 
 		.thumb-label {
+			z-index: 1;
 			position: absolute;
 			top: 0px;
 			left: calc(var(--_v-slider-percentage) * 1%);