diff --git a/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss b/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
index 762f467bf..645cfe97f 100644
--- a/apps/client/src/features/control/playback/aux-timer/AuxTimer.module.scss
+++ b/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 {
diff --git a/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx b/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
index 2e8083041..3c4b0694c 100644
--- a/apps/client/src/features/control/playback/aux-timer/AuxTimer.tsx
+++ b/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}`} />