fix: adjust positioning logic for mean label in RangeWithValue component (#307)

Co-authored-by: Simon Bigelmayr <simon.bigelmayr@mll.com>

Author: simbig

src/RangeWithValue/index.tsx

@@ -72,21 +72,16 @@ export function RangeWithValue({
   });
 
   const meanValue = (expectedMin + expectedMax) / 2;
-  const meanLabelWidth = 28;
+  const meanLabelWidth = 18;
 
   return (
     <Container>
       <Scale>
         <RangeLine left={`${percentage(expectedMin)}%`} />
         <RangeLine left={`${percentage(expectedMax)}%`} />
         {showMean && (
-          <Label
-            left={`calc(${percentage(meanValue)}% - ${meanLabelWidth / 2}px)`}
-          >
-            {meanValue.toFixed(2)}
-          </Label>
+          <RangeLine left={`calc(${percentage(meanValue)}% - 0.5px)`} />
         )}
-
         <Tooltip
           title={(() => {
             if (isOutOfRange) {
@@ -129,6 +124,13 @@ export function RangeWithValue({
         <Label left={`calc(${percentage(expectedMax)}% - 14px)`}>
           {expectedMax}
         </Label>
+        {showMean && (
+          <Label
+            left={`calc(${percentage(meanValue)}% - ${meanLabelWidth / 2}px)`}
+          >
+            {meanValue.toFixed(2)}
+          </Label>
+        )}
       </LabelWrapper>
     </Container>
   );