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

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;
+  gap: 2px;
-}
-
-.groupLabel {
-  color: $gray-400;
-  font-size: calc(1rem - 3px);
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  white-space: nowrap;
 }
 
 .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;

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}>
+        <ToggleGroup value={[editorMode]} onValueChange={toggleAppMode} className={style.group}>
-          <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}>
           <Tooltip
-            text='View rundown in list mode'
+            text='Live playback view with auto-follow'
-            render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.List} className={style.radioButton} />}
+            render={<Toolbar.Button render={<Toggle />} value={AppMode.Run} className={style.radioButton} />}
           >
-            List
+            Run
           </Tooltip>
           <Tooltip
-            text='View rundown in table mode'
+            text='Manual editing without playback automation'
-            render={<Toolbar.Button render={<Toggle />} value={RundownViewMode.Table} className={style.radioButton} />}
+            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}>
+        <div className={style.group}>
-          <span className={style.groupLabel}>Offset</span>
+          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.segments}>
-          <ToggleGroup value={[offsetMode]} onValueChange={toggleOffsetMode} className={style.group}>
             <Toolbar.Button render={<Toggle />} value={OffsetMode.Absolute} className={style.radioButton}>
               Absolute
             </Toolbar.Button>