From 03fa62f3a100b2c25432b240e391a1a5f803d44f Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Wed, 26 Aug 2026 12:39:02 +0000
Subject: [PATCH] feat(ui): fit the message control panel on a small laptop

The panel absorbs whatever height the playback control above it leaves, and
its content was a fixed stack taller than that space on a 1280x800 screen -
with the container set to hide overflow, the secondary message input was
silently clipped off the bottom.

The stage preview is now the only elastic element and the controls are the
fixed floor, which is the way round an operator needs it. The control stack
also gets shorter: blink and blackout share a row, and the secondary source
select moves next to the secondary text input.

That regrouping removes the duelling owners of `secondarySource`. The select
picks the source and the eye toggles the line on and off, so the "Show
secondary" button - which wrote the same field from a second place, and made
picking an aux read as "secondary message hidden" - is gone along with the
local mirror of the remote state it needed.

Also: blackout now uses the destructive button variant, the toggles expose
`aria-pressed`, and the input rows use the shared editor label.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011CHxSQ6nWHuyar8feieRra
---
 apps/client/src/common/hooks/useSocket.ts     | 12 ++-
 .../control/message/InputRow.module.scss      | 14 ++-
 .../src/features/control/message/InputRow.tsx | 15 ++-
 .../control/message/MessageControl.tsx        | 62 +++++++-----
 .../message/MessageControlExport.module.scss  | 10 +-
 .../control/message/ScreenControl.module.scss |  6 ++
 .../control/message/ScreenControl.tsx         | 31 ++++++
 .../control/message/TimerPreview.module.scss  | 19 +++-
 .../features/control/message/TimerPreview.tsx | 12 ++-
 .../message/TimerViewControl.module.scss      | 11 ---
 .../control/message/TimerViewControl.tsx      | 95 -------------------
 11 files changed, 131 insertions(+), 156 deletions(-)
 create mode 100644 apps/client/src/features/control/message/ScreenControl.module.scss
 create mode 100644 apps/client/src/features/control/message/ScreenControl.tsx
 delete mode 100644 apps/client/src/features/control/message/TimerViewControl.module.scss
 delete mode 100644 apps/client/src/features/control/message/TimerViewControl.tsx

diff --git a/apps/client/src/common/hooks/useSocket.ts b/apps/client/src/common/hooks/useSocket.ts
index 49e16de1c..da94bb454 100644
--- a/apps/client/src/common/hooks/useSocket.ts
+++ b/apps/client/src/common/hooks/useSocket.ts
@@ -22,10 +22,14 @@ export const useRundownEditor = createSelector((state: RuntimeStore) => ({
   nextEventId: state.eventNext?.id ?? null,
 }));
 
-export const useTimerViewControl = createSelector((state: RuntimeStore) => ({
+export const useScreenControl = createSelector((state: RuntimeStore) => ({
   blackout: state.message.timer.blackout,
   blink: state.message.timer.blink,
-  secondarySource: state.message.timer.secondarySource,
+  isScreenModified:
+    state.message.timer.visible ||
+    state.message.timer.blink ||
+    state.message.timer.blackout ||
+    state.message.timer.secondarySource !== null,
 }));
 
 export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
@@ -33,9 +37,9 @@ export const useTimerMessageInput = createSelector((state: RuntimeStore) => ({
   visible: state.message.timer.visible,
 }));
 
-export const useExternalMessageInput = createSelector((state: RuntimeStore) => ({
+export const useSecondaryMessageInput = createSelector((state: RuntimeStore) => ({
   text: state.message.secondary,
-  visible: state.message.timer.secondarySource === 'secondary',
+  source: state.message.timer.secondarySource,
 }));
 
 export const useTimerStatus = createSelector((state: RuntimeStore) => ({
diff --git a/apps/client/src/features/control/message/InputRow.module.scss b/apps/client/src/features/control/message/InputRow.module.scss
index 877549f99..7730006a1 100644
--- a/apps/client/src/features/control/message/InputRow.module.scss
+++ b/apps/client/src/features/control/message/InputRow.module.scss
@@ -2,14 +2,12 @@
   display: grid;
   grid-template-columns: 1fr auto;
   gap: $element-spacing;
-  margin-top: $element-inner-spacing;
-}
 
-.label {
-  font-size: $inner-section-text-size;
-  color: $label-gray;
-
-  &.active {
-    color: $action-text-color;
+  &.withSource {
+    grid-template-columns: auto 1fr auto;
   }
 }
+
+.label.active {
+  color: $action-text-color;
+}
diff --git a/apps/client/src/features/control/message/InputRow.tsx b/apps/client/src/features/control/message/InputRow.tsx
index c5559a5b9..59c5e8c37 100644
--- a/apps/client/src/features/control/message/InputRow.tsx
+++ b/apps/client/src/features/control/message/InputRow.tsx
@@ -1,5 +1,6 @@
-import { PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from 'react';
 
+import * as Editor from '../../../common/components/editor-utils/EditorUtils';
 import Input from '../../../common/components/input/input/Input';
 import { cx } from '../../../common/utils/styleUtils';
 
@@ -9,12 +10,15 @@ interface InputRowProps {
   label: string;
   placeholder: string;
   text: string;
+  /** whether this text is currently on the audience screen */
   visible: boolean;
   changeHandler: (newValue: string) => void;
+  /** control which picks where the text is shown, rendered before the input */
+  sourcePicker?: ReactNode;
 }
 
 export default function InputRow(props: PropsWithChildren<InputRowProps>) {
-  const { label, placeholder, text, visible, changeHandler, children } = props;
+  const { label, placeholder, text, visible, changeHandler, sourcePicker, children } = props;
 
   const [value, setValue] = useState(text);
   const inputRef = useRef<HTMLInputElement>(null);
@@ -43,10 +47,11 @@ export default function InputRow(props: PropsWithChildren<InputRowProps>) {
 
   return (
     <div>
-      <label className={cx([style.label, visible && style.active])} htmlFor={label}>
+      <Editor.Label className={cx([style.label, visible && style.active])} htmlFor={label}>
         {label}
-      </label>
-      <div className={style.inputItems}>
+      </Editor.Label>
+      <div className={cx([style.inputItems, sourcePicker && style.withSource])}>
+        {sourcePicker}
         <Input id={label} ref={inputRef} value={value} onChange={handleInputChange} placeholder={placeholder} />
         {children}
       </div>
diff --git a/apps/client/src/features/control/message/MessageControl.tsx b/apps/client/src/features/control/message/MessageControl.tsx
index 54270651f..ecbab07a3 100644
--- a/apps/client/src/features/control/message/MessageControl.tsx
+++ b/apps/client/src/features/control/message/MessageControl.tsx
@@ -1,18 +1,18 @@
+import { SecondarySource } from 'ontime-types';
 import { IoEye, IoEyeOffOutline } from 'react-icons/io5';
 
 import IconButton from '../../../common/components/buttons/IconButton';
-import {
-  setMessage,
-  useExternalMessageInput as useSecondaryMessageInput,
-  useTimerMessageInput,
-} from '../../../common/hooks/useSocket';
+import Select from '../../../common/components/select/Select';
+import { setMessage, useSecondaryMessageInput, useTimerMessageInput } from '../../../common/hooks/useSocket';
 import InputRow from './InputRow';
-import TimerControlsPreview from './TimerViewControl';
+import ScreenControl from './ScreenControl';
+import TimerPreview from './TimerPreview';
 
 export default function MessageControl() {
   return (
     <>
-      <TimerControlsPreview />
+      <TimerPreview />
+      <ScreenControl />
       <TimerMessageInput />
       <SecondaryInput />
     </>
@@ -24,7 +24,7 @@ function TimerMessageInput() {
 
   return (
     <InputRow
-      label='Timer Message'
+      label='Timer message'
       placeholder='Message shown fullscreen in stage timer'
       text={text}
       visible={visible}
@@ -32,6 +32,7 @@ function TimerMessageInput() {
     >
       <IconButton
         aria-label='Toggle timer message visibility'
+        aria-pressed={visible}
         onClick={() => setMessage.timerVisible(!visible)}
         variant={visible ? 'primary' : 'subtle'}
       >
@@ -41,31 +42,46 @@ function TimerMessageInput() {
   );
 }
 
+/**
+ * The secondary line of the stage timer shows one of the aux timers or the secondary message.
+ * The select owns which one, the eye owns whether the line is shown at all.
+ */
 function SecondaryInput() {
-  const { text, visible } = useSecondaryMessageInput();
-
-  const toggleSecondary = () => {
-    if (visible) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource('secondary');
-    }
-  };
+  const { text, source } = useSecondaryMessageInput();
+  const isShowingSecondaryLine = source !== null;
+  const selectedSource = source ?? 'aux1';
 
   return (
     <InputRow
-      label='Secondary Message'
+      label='Secondary'
       placeholder='Message shown as secondary text in stage timer'
       text={text}
-      visible={visible}
+      visible={source === 'secondary'}
       changeHandler={(newValue) => setMessage.secondaryMessage(newValue)}
+      sourcePicker={
+        <Select
+          value={selectedSource}
+          options={[
+            { value: 'aux1', label: 'Aux 1' },
+            { value: 'aux2', label: 'Aux 2' },
+            { value: 'aux3', label: 'Aux 3' },
+            { value: 'secondary', label: 'Message' },
+          ]}
+          onValueChange={(value: SecondarySource | null) => {
+            if (value === null) return;
+            setMessage.timerSecondarySource(value);
+          }}
+        />
+      }
     >
       <IconButton
-        aria-label='Toggle secondary message visibility'
-        onClick={toggleSecondary}
-        variant={visible ? 'primary' : 'subtle'}
+        aria-label='Toggle secondary visibility'
+        aria-pressed={isShowingSecondaryLine}
+        onClick={() => setMessage.timerSecondarySource(isShowingSecondaryLine ? null : selectedSource)}
+        variant={isShowingSecondaryLine ? 'primary' : 'subtle'}
+        data-testid='toggle secondary'
       >
-        {visible ? <IoEye /> : <IoEyeOffOutline />}
+        {isShowingSecondaryLine ? <IoEye /> : <IoEyeOffOutline />}
       </IconButton>
     </InputRow>
   );
diff --git a/apps/client/src/features/control/message/MessageControlExport.module.scss b/apps/client/src/features/control/message/MessageControlExport.module.scss
index 7b368a10e..9937fcdd3 100644
--- a/apps/client/src/features/control/message/MessageControlExport.module.scss
+++ b/apps/client/src/features/control/message/MessageControlExport.module.scss
@@ -1,11 +1,19 @@
 .growPanel {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .contentLayout {
+  flex: 1;
+  min-height: 0;
+  container-type: inline-size;
+
   display: flex;
   flex-direction: column;
-  gap: $section-spacing;
+  gap: $element-spacing;
   color: $ui-white;
   padding-top: $panel-top-padding;
 }
diff --git a/apps/client/src/features/control/message/ScreenControl.module.scss b/apps/client/src/features/control/message/ScreenControl.module.scss
new file mode 100644
index 000000000..43b722d2b
--- /dev/null
+++ b/apps/client/src/features/control/message/ScreenControl.module.scss
@@ -0,0 +1,6 @@
+.screenControl {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: $element-spacing;
+}
diff --git a/apps/client/src/features/control/message/ScreenControl.tsx b/apps/client/src/features/control/message/ScreenControl.tsx
new file mode 100644
index 000000000..dd6d19b7f
--- /dev/null
+++ b/apps/client/src/features/control/message/ScreenControl.tsx
@@ -0,0 +1,31 @@
+import Button from '../../../common/components/buttons/Button';
+import { setMessage, useScreenControl } from '../../../common/hooks/useSocket';
+
+import style from './ScreenControl.module.scss';
+
+export default function ScreenControl() {
+  const { blackout, blink } = useScreenControl();
+
+  return (
+    <div className={style.screenControl}>
+      <Button
+        variant={blink ? 'primary' : 'subtle'}
+        aria-pressed={blink}
+        fluid
+        onClick={() => setMessage.timerBlink(!blink)}
+        data-testid='toggle timer blink'
+      >
+        Blink
+      </Button>
+      <Button
+        variant={blackout ? 'destructive' : 'subtle'}
+        aria-pressed={blackout}
+        fluid
+        onClick={() => setMessage.timerBlackout(!blackout)}
+        data-testid='toggle timer blackout'
+      >
+        Blackout
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/client/src/features/control/message/TimerPreview.module.scss b/apps/client/src/features/control/message/TimerPreview.module.scss
index 0968fed14..8fcd756bd 100644
--- a/apps/client/src/features/control/message/TimerPreview.module.scss
+++ b/apps/client/src/features/control/message/TimerPreview.module.scss
@@ -1,9 +1,19 @@
 .preview {
-  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: $element-inner-spacing;
+}
+
+/* the stage is the only elastic element in the panel, the controls below it keep their size */
+.stage {
+  flex: 1 1 auto;
+  min-height: 3rem;
+  /* keep the height driven frame from growing wider than the panel */
+  max-height: calc(100cqw * 9 / 16);
   display: grid;
   place-items: center;
-  min-height: 0;
-  overflow: hidden;
 }
 
 /* the frame is a query container so that the embedded timer scales to the preview, not to the viewport */
@@ -13,8 +23,7 @@
   contain: paint;
   overflow: hidden;
   aspect-ratio: 16 / 9;
-  width: 100%;
-  max-height: 100%;
+  height: 100%;
   border-radius: $component-border-radius-md;
 }
 
diff --git a/apps/client/src/features/control/message/TimerPreview.tsx b/apps/client/src/features/control/message/TimerPreview.tsx
index 6f62a8e7d..b7f667daa 100644
--- a/apps/client/src/features/control/message/TimerPreview.tsx
+++ b/apps/client/src/features/control/message/TimerPreview.tsx
@@ -3,6 +3,7 @@ import useViewSettings from '../../../common/hooks-query/useViewSettings';
 import { handleLinks } from '../../../common/utils/linkUtils';
 import PipRoot from '../../../views/editor/pip-timer/PipRoot';
 import { PipTimer } from '../../../views/editor/pip-timer/PipTimer';
+import TimerStatus from './TimerStatus';
 
 import style from './TimerPreview.module.scss';
 
@@ -11,12 +12,15 @@ export default function TimerPreview() {
 
   return (
     <div className={style.preview}>
-      <div className={style.stageFrame}>
-        <PipTimer viewSettings={data} />
-        <div className={style.stageCorners}>
-          <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+      <div className={style.stage}>
+        <div className={style.stageFrame}>
+          <PipTimer viewSettings={data} />
+          <div className={style.stageCorners}>
+            <CornerWithPip onExtractClick={(event) => handleLinks('timer', event)} pipElement={<PipRoot />} />
+          </div>
         </div>
       </div>
+      <TimerStatus />
     </div>
   );
 }
diff --git a/apps/client/src/features/control/message/TimerViewControl.module.scss b/apps/client/src/features/control/message/TimerViewControl.module.scss
deleted file mode 100644
index df7d97c4f..000000000
--- a/apps/client/src/features/control/message/TimerViewControl.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.previewContainer {
-  display: grid;
-  gap: $element-spacing;
-  grid-template-columns: 3fr 2fr;
-}
-
-.options {
-  display: flex;
-  flex-direction: column;
-  gap: $element-spacing;
-}
diff --git a/apps/client/src/features/control/message/TimerViewControl.tsx b/apps/client/src/features/control/message/TimerViewControl.tsx
deleted file mode 100644
index 63e663310..000000000
--- a/apps/client/src/features/control/message/TimerViewControl.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { SecondarySource } from 'ontime-types';
-import { useEffect, useState } from 'react';
-
-import Button from '../../../common/components/buttons/Button';
-import * as Editor from '../../../common/components/editor-utils/EditorUtils';
-import Select from '../../../common/components/select/Select';
-import { setMessage, useTimerViewControl } from '../../../common/hooks/useSocket';
-import TimerPreview from './TimerPreview';
-import TimerStatus from './TimerStatus';
-
-import style from './TimerViewControl.module.scss';
-
-export default function TimerControlsPreview() {
-  const { blackout, blink } = useTimerViewControl();
-
-  return (
-    <div className={style.previewContainer}>
-      <TimerPreview />
-      <div className={style.options}>
-        <TimerStatus />
-
-        <SecondarySourceControl />
-
-        <Editor.Separator orientation='horizontal' />
-
-        <Button
-          variant={blink ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlink(!blink)}
-          data-testid='toggle timer blink'
-        >
-          Blink
-        </Button>
-        <Button
-          variant={blackout ? 'primary' : 'subtle'}
-          fluid
-          onClick={() => setMessage.timerBlackout(!blackout)}
-          data-testid='toggle timer blackout'
-        >
-          Blackout screen
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-function SecondarySourceControl() {
-  const { secondarySource } = useTimerViewControl();
-  const [value, setValue] = useState<SecondarySource>('aux1');
-
-  // sync secondary source with external changes
-  useEffect(() => {
-    if (secondarySource !== null) {
-      setValue(secondarySource);
-    }
-  }, [secondarySource]);
-
-  const toggleSecondary = () => {
-    if (secondarySource === value) {
-      setMessage.timerSecondarySource(null);
-    } else {
-      setMessage.timerSecondarySource(value);
-    }
-  };
-
-  return (
-    <>
-      <Select
-        value={value}
-        options={[
-          { value: 'aux1', label: 'Aux 1' },
-          { value: 'aux2', label: 'Aux 2' },
-          { value: 'aux3', label: 'Aux 3' },
-          { value: 'secondary', label: 'Secondary message' },
-        ]}
-        onValueChange={(value: SecondarySource | null) => {
-          if (value === null) return;
-          // we can only update the remote if it is enabled
-          if (secondarySource !== null) {
-            setMessage.timerSecondarySource(value);
-          }
-          setValue(value);
-        }}
-      />
-      <Button
-        variant={secondarySource !== null ? 'primary' : 'subtle'}
-        fluid
-        onClick={toggleSecondary}
-        data-testid='toggle secondary'
-      >
-        Show secondary
-      </Button>
-    </>
-  );
-}