[4.x] Make labels not clip outside of the frame & allow them to show together with inputs

resources/views/components/input/range-slider.blade.php

@@ -1,4 +1,4 @@
-@props(['inputs' => true])
+@props(['inputs' => true, 'labels' => true])
 @slots(['value'])
 
 <range-slider v-slot="{ _renderProxy: rangeInputScope, value, prefix, suffix }" {{ $attributes }}>
@@ -35,10 +35,10 @@ class="range-max absolute pointer-events-none appearance-none z-20 h-5 w-full op
                 <div class="absolute top-1/2 -translate-y-1/2 h-1 z-20 rounded-md bg-active" v-bind:style="'right:'+rangeInputScope.maxThumb+'%; left:'+rangeInputScope.minThumb+'%'"></div>
                 <div class="absolute z-30 size-4 top-1/2 left-0 bg-active rounded-full -translate-y-1/2 -translate-x-1/2 outline outline-transparent outline-1 outline-offset-1 group-has-[.range-min:focus]/range-slider:outline-emphasis" v-bind:style="'left: '+rangeInputScope.minThumb+'%'"></div>
                 <div class="absolute z-30 size-4 top-1/2 right-0 bg-active rounded-full -translate-y-1/2 translate-x-1/2 outline outline-transparent outline-1 outline-offset-1 group-has-[.range-max:focus]/range-slider:outline-emphasis" v-bind:style="'right: '+rangeInputScope.maxThumb+'%'"></div>
-                @if (!$inputs)
+                @if ($labels)
                     <div
-                        class="absolute z-30 top-5 left-0 bg-active text-white px-2 py-0.5 rounded-md -translate-x-1/2"
-                        v-bind:style="'left: '+rangeInputScope.minThumb+'%'"
+                        class="absolute z-30 top-5 left-0 bg-active text-white px-2 py-0.5 rounded-md -translate-x-1/2 whitespace-nowrap"
+                        v-bind:style="'left: '+rangeInputScope.minThumb+'%;--tw-translate-x:-'+rangeInputScope.minThumb+'%'"
                         v-bind:set="value = rangeInputScope.minValue"
                     >
                         @if ($value->isNotEmpty())
@@ -48,8 +48,8 @@ class="absolute z-30 top-5 left-0 bg-active text-white px-2 py-0.5 rounded-md -t
                         @endif
                     </div>
                     <div
-                        class="absolute z-30 top-5 right-0 bg-active text-white px-2 py-0.5 rounded-md translate-x-1/2"
-                        v-bind:style="'right: '+rangeInputScope.maxThumb+'%'"
+                        class="absolute z-30 top-5 right-0 bg-active text-white px-2 py-0.5 rounded-md translate-x-1/2 whitespace-nowrap"
+                        v-bind:style="'right: '+rangeInputScope.maxThumb+'%;--tw-translate-x:'+rangeInputScope.maxThumb+'%'"
                         v-bind:set="value = rangeInputScope.maxValue"
                     >
                         @if ($value->isNotEmpty())
@@ -62,7 +62,11 @@ class="absolute z-30 top-5 right-0 bg-active text-white px-2 py-0.5 rounded-md t
             </div>
         </div>
         @if ($inputs)
-            <div class="flex items-center gap-x-4 mt-4">
+            <div @class([
+                'flex items-center gap-x-4',
+                'mt-4' => !$labels,
+                'mt-9' => $labels,
+            ])>
                 <div class="relative w-full">
                     <x-rapidez::input
                         required