fix: positioning of salary band min max markers on small devices (#250)

Author: maybeanerd

components/SalaryBandLine.vue

@@ -1,67 +1,60 @@
 <template>
-  <div class="relative h-10 flex items-center">
-    <!-- Salary band line -->
+  <div class="flex gap-1 items-center">
+    <!-- Min label -->
     <div
-      class="absolute h-2 bg-gray-200 dark:bg-gray-700 rounded-full"
-      :style="{
-        left: `${getPercentPosition(min)}%`,
-        width: `${getPercentWidth(min, max)}%`
-      }"
-    />
-
-    <!-- Min marker -->
-    <div
-      class="absolute top-1/2 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
-      :style="{
-        left: `${getPercentPosition(min)}%`,
-        transform: 'translateX(-100%) translateY(-50%)',
-        marginLeft: '-4px'
-      }"
+      class="text-xs text-gray-500 dark:text-gray-400 w-16 whitespace-nowrap"
     >
       {{ formatValue(min) }}
     </div>
 
-    <!-- Max marker -->
-    <div
-      class="absolute top-1/2 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"
-      :style="{
-        left: `${getPercentPosition(max)}%`,
-        transform: 'translateY(-50%)',
-        marginLeft: '4px'
-      }"
-    >
-      {{ formatValue(max) }}
-    </div>
+    <!-- Line with markers -->
+    <div class="relative h-10 flex items-center w-full">
+      <!-- Salary band line -->
+      <div
+        class="absolute h-2 bg-gray-200 dark:bg-gray-700 rounded-full"
+        :style="{
+          left: `${getPercentPosition(min)}%`,
+          width: `${getPercentWidth(min, max)}%`
+        }"
+      />
 
-    <!-- Median marker -->
-    <div
-      class="absolute w-1 h-4 bg-blue-500 rounded-full transform -translate-x-1/2"
-      :style="{ left: `${getPercentPosition(median)}%` }"
-    >
-      <div class="absolute top-4 transform -translate-x-1/2 text-xs text-blue-500 whitespace-nowrap">
-        {{ formatValue(median) }}
+      <!-- Median marker -->
+      <div
+        class="absolute w-1 h-4 bg-blue-500 rounded-full transform -translate-x-1/2"
+        :style="{ left: `${getPercentPosition(median)}%` }"
+      >
+        <div class="absolute top-4 transform -translate-x-1/2 text-xs text-blue-500 whitespace-nowrap">
+          {{ formatValue(median) }}
+        </div>
       </div>
-    </div>
 
-    <!-- Average marker -->
-    <div
-      class="absolute w-1 h-4 bg-green-500 rounded-full transform -translate-x-1/2"
-      :style="{ left: `${getPercentPosition(average)}%` }"
-    >
-      <div class="absolute top-[-16px] transform -translate-x-1/2 text-xs text-green-500 whitespace-nowrap">
-        {{ formatValue(average) }}
+      <!-- Average marker -->
+      <div
+        class="absolute w-1 h-4 bg-green-500 rounded-full transform -translate-x-1/2"
+        :style="{ left: `${getPercentPosition(average)}%` }"
+      >
+        <div class="absolute top-[-16px] transform -translate-x-1/2 text-xs text-green-500 whitespace-nowrap">
+          {{ formatValue(average) }}
+        </div>
+      </div>
+
+      <!-- Own salary marker (optional) -->
+      <div
+        v-if="ownSalary"
+        class="absolute w-1 h-6 bg-purple-500 rounded-full transform -translate-x-1/2"
+        :style="{ left: `${getPercentPosition(ownSalary)}%` }"
+      >
+        <div class="absolute top-8 transform -translate-x-1/2 text-xs text-purple-500 whitespace-nowrap">
+          {{ formatValue(ownSalary) }}
+        </div>
       </div>
     </div>
 
-    <!-- Own salary marker (optional) -->
+    <!-- Max label -->
     <div
-      v-if="ownSalary"
-      class="absolute w-1 h-6 bg-purple-500 rounded-full transform -translate-x-1/2"
-      :style="{ left: `${getPercentPosition(ownSalary)}%` }"
+      class="text-xs text-gray-500 dark:text-gray-400 w-18 whitespace-nowrap"
     >
-      <div class="absolute top-8 transform -translate-x-1/2 text-xs text-purple-500 whitespace-nowrap">
-        {{ formatValue(ownSalary) }}
-      </div>
+      {{ formatValue(max) }}
     </div>
   </div>
 </template>
@@ -82,22 +75,21 @@ const props = defineProps<{
 function getPercentPosition (value: number | string) {
   const numValue = Number(value);
   const range = props.globalMax - props.globalMin;
-  if (range === 0) {
+  if (range <= 0) {
     return 50;
   }
-  // Add padding of 10% on each side
-  return 10 + ((numValue - props.globalMin) / range) * 80;
+  return ((numValue - props.globalMin) / range) * 100;
 }
 
 // Calculate width percentage for the salary band
 function getPercentWidth (min: number, max: number) {
   const minValue = min;
   const maxValue = max;
   const range = props.globalMax - props.globalMin;
-  if (range === 0) {
-    return 80;
+  if (range <= 0) {
+    return 100;
   }
-  return ((maxValue - minValue) / range) * 80;
+  return ((maxValue - minValue) / range) * 100;
 }
 
 // Format the value for display