fix: remove unit prop from CircleSlider, fix label overflow

The unit suffix in the CircleSlider label caused overflow and broke
the layout. Duration is already stored in seconds throughout the UI
so no conversion is needed. Duration formatting improvements from the
previous commit (logs table, limits display, range input) are kept.

Author: hhvrc

src/lib/components/ControlModules/ClassicControlModule.svelte

@@ -58,18 +58,11 @@
 <div class="grid w-full grid-cols-2 place-items-center gap-2">
   <CircleSlider
     name="Intensity"
-    unit="%"
     bind:value={intensity}
     {...ControlIntensityProps}
     max={maxIntensity}
   />
-  <CircleSlider
-    name="Duration"
-    unit="s"
-    bind:value={duration}
-    {...ControlDurationProps}
-    max={maxDuration}
-  />
+  <CircleSlider name="Duration" bind:value={duration} {...ControlDurationProps} max={maxDuration} />
 </div>
 
 <!-- Buttons -->

src/lib/components/ControlModules/PublicShareClassicControlModule.svelte

@@ -93,14 +93,12 @@
   <div class="flex items-center gap-2">
     <CircleSlider
       name="Intensity"
-      unit="%"
       bind:value={intensity}
       {...ControlIntensityProps}
       max={maxIntensity}
     />
     <CircleSlider
       name="Duration"
-      unit="s"
       bind:value={duration}
       {...ControlDurationProps}
       max={maxDurationSeconds}

src/lib/components/ControlModules/SharedShockerControlModule.svelte

@@ -95,14 +95,12 @@
   <div class="flex items-center gap-2">
     <CircleSlider
       name="Intensity"
-      unit="%"
       bind:value={intensity}
       {...ControlIntensityProps}
       max={maxIntensity}
     />
     <CircleSlider
       name="Duration"
-      unit="s"
       bind:value={duration}
       {...ControlDurationProps}
       max={maxDurationSeconds}

src/lib/components/ControlModules/SimpleControlHeader.svelte

@@ -33,13 +33,8 @@
     <p>{formatDurationSeconds(duration)}</p>
   </div>
   <div class="flex flex-1 flex-row justify-between">
-    <CircleSlider name="Shock" unit="%" bind:value={shockIntensity} {...ControlIntensityProps} />
-    <CircleSlider
-      name="Vibration"
-      unit="%"
-      bind:value={vibrationIntensity}
-      {...ControlIntensityProps}
-    />
-    <CircleSlider name="Duration" unit="s" bind:value={duration} {...ControlDurationProps} />
+    <CircleSlider name="Shock" bind:value={shockIntensity} {...ControlIntensityProps} />
+    <CircleSlider name="Vibration" bind:value={vibrationIntensity} {...ControlIntensityProps} />
+    <CircleSlider name="Duration" bind:value={duration} {...ControlDurationProps} />
   </div>
 </div>

src/lib/components/ControlModules/impl/CircleSlider.svelte

@@ -39,12 +39,10 @@
     min: number;
     max: number;
     step: number;
-    /** Optional unit shown in the caption label, e.g. "s" -> "Duration (s)". */
-    unit?: string;
     tabindex?: number | null;
   }
 
-  let { name, value = $bindable(), min, max, step, unit, tabindex }: Props = $props();
+  let { name, value = $bindable(), min, max, step, tabindex }: Props = $props();
 
   // Non-reactive variables for keeping track of slider state
   let isTracking = false;
@@ -202,6 +200,6 @@
     for={inputId}
     class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/10 text-center text-neutral-600 dark:text-neutral-300"
   >
-    {unit ? `${name} (${unit})` : name}
+    {name}
   </label>
 </div>