From d70d7f2fd84426034ff0d79c10e1a183f792732a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 1 Aug 2026 07:32:02 +0000
Subject: [PATCH] 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
---
 .../features/control/playback/aux-timer/AuxTimer.module.scss | 3 +++
 .../src/features/control/playback/aux-timer/AuxTimer.tsx     | 5 +++--
 2 files changed, 6 insertions(+), 2 deletions(-)

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}`} />