From 42c5aa4fe48d8a481820b62ace392579e0f70d50 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 19 Jul 2026 09:02:30 +0000
Subject: [PATCH] refactor(rundown): move offset tip inside the pill, drop
 labels

Group labels widened the header and left the label, toggles and icon
reading as three detached elements. Instead keep only the offset
indicator and place it inside the pill, divided from the toggles, so the
control reads as one grouped segmented unit. Mode/View revert to plain
pills.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Hj5P4eDgf97zSCzViGHNDy
---
 .../rundown-header/RundownHeader.module.scss  | 17 ++----
 .../rundown/rundown-header/RundownHeader.tsx  | 57 ++++++++-----------
 2 files changed, 31 insertions(+), 43 deletions(-)

diff --git a/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss b/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss
index 3c7f81ca1..6f813fdff 100644
--- a/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss
+++ b/apps/client/src/features/rundown/rundown-header/RundownHeader.module.scss
@@ -58,24 +58,19 @@
   }
 }
 
-.controlGroup {
+/** inner toggle row when the pill also holds a trailing element (e.g. info icon) */
+.segments {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
-}
-
-.groupLabel {
-  color: $gray-400;
-  font-size: calc(1rem - 3px);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
+  gap: 2px;
 }
 
 .infoIcon {
   display: flex;
   align-items: center;
+  height: calc(2rem - 4px); // match .radioButton height
+  padding-inline: 0.4rem;
+  border-left: 1px solid $gray-1000;
   color: $gray-400;
   font-size: calc(1rem + 1px);
   cursor: help;
diff --git a/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx b/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx
index 88399a5d9..68e7f53ca 100644
--- a/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx
+++ b/apps/client/src/features/rundown/rundown-header/RundownHeader.tsx
@@ -75,47 +75,40 @@ function RundownHeader({ isExtracted, viewMode, setViewMode }: RundownHeaderProp
   return (
     <Toolbar.Root className={style.header}>
       {showRunEditToggle && (
-        <div className={style.controlGroup}>
-          <span className={style.groupLabel}>Mode</span>
-          <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
-            <Tooltip
-              text='Live playback view with auto-follow'
-              render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
-            >
-              Run
-            </Tooltip>
-            <Tooltip
-              text='Manual editing without playback automation'
-              render={<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton} />}
-            >
-              Edit
-            </Tooltip>
-          </ToggleGroup>
-        </div>
-      )}
-
-      <div className={style.controlGroup}>
-        <span className={style.groupLabel}>View</span>
-        <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
+        <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
           <Tooltip
-            text='View rundown in list mode'
-            render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
+            text='Live playback view with auto-follow'
+            render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
           >
-            List
+            Run
           </Tooltip>
           <Tooltip
-            text='View rundown in table mode'
-            render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
+            text='Manual editing without playback automation'
+            render={<Toolbar.Button render={<Toggle />} value={AppMode.Edit} className={style.radioButton} />}
           >
-            Table
+            Edit
           </Tooltip>
         </ToggleGroup>
-      </div>
+      )}
+
+      <ToggleGroup value={[viewMode]} onValueChange={toggleViewMode} className={style.group}>
+        <Tooltip
+          text='View rundown in list mode'
+          render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
+        >
+          List
+        </Tooltip>
+        <Tooltip
+          text='View rundown in table mode'
+          render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
+        >
+          Table
+        </Tooltip>
+      </ToggleGroup>
 
       {showOffsetToggle && (
-        <div className={style.controlGroup}>
-          <span className={style.groupLabel}>Offset</span>
-          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
+        <div className={style.group}>
+          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.segments}>
             <Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton}>
               Absolute
             </Toolbar.Button>