fix: prevent aux timer names from breaking the playback control layout

The aux timer label sits inside a 3 column CSS grid. Grid items default
to min-width: auto, so their minimum width is set by their content -
with white-space: nowrap forcing that to the full unbroken name, the
column would grow to fit it instead of the ellipsis ever kicking in,
breaking the equal column layout for long names.

Set min-width: 0 on the label so it can shrink to its grid column, and
swap the native title attribute for the app's shared Tooltip component
so the full name is still available on hover, consistent with how
truncated text is handled elsewhere in the app.

Verified in the browser: a long name now truncates with an ellipsis
without disturbing the three-column layout, and hovering shows the
full name in a tooltip.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WCZejVTzuAY3tHTE6nB3JH

apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss

@@ -1,6 +1,9 @@
 .label {
   display: block;
   margin-top: 1rem;
+  // aux timers sit in a 3 column grid, without this a long name would grow its column
+  // instead of shrinking to it, breaking the equal column layout
+  min-width: 0;
 }
 
 .labelText {

apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx

@@ -3,6 +3,7 @@ import { millisToString, parseUserTime } from 'ontime-utils';
 import { IoArrowDown, IoArrowUp, IoPause, IoPlay, IoStop } from 'react-icons/io5';
 
 import TimeInput from '../../../../common/components/input/time-input/TimeInput';
+import Tooltip from '../../../../common/components/tooltip/Tooltip';
 import { setAuxTimer, useAuxTimerControl, useAuxTimerTime } from '../../../../common/hooks/useSocket';
 import { getAuxTimerIndexedLabel } from '../../../../common/utils/auxTimerUtils';
 import TapButton from '../tap-button/TapButton';
@@ -30,9 +31,9 @@ export function AuxTimer({ index }: AuxTimerProps) {
 
   return (
     <label className={style.label}>
-      <span className={style.labelText} title={label}>
+      <Tooltip text={label} render={<span />} className={style.labelText}>
         {label}
-      </span>
+      </Tooltip>
       <div className={style.controls}>
         <div className={style.input}>
           <AuxTimerInput index={index} isActive={isActive} placeholder={`Aux ${index}`} />