fix: resolve segment list header glitches

Author: Ivan Maretić

packages/webui/src/client/lib/viewPort.ts

@@ -5,6 +5,7 @@ import { Settings } from '../lib/Settings.js'
 import { PartId, PartInstanceId, SegmentId } from '@sofie-automation/corelib/dist/dataModel/Ids'
 import { UIPartInstances, UIParts } from '../ui/Collections.js'
 import { logger } from './logging.js'
+import { parse as queryStringParse } from 'query-string'
 
 const HEADER_MARGIN = 24 // TODOSYNC: TV2 uses 15. If it's needed to be different, it needs to be made generic somehow..
 const FALLBACK_HEADER_HEIGHT = 65
@@ -102,6 +103,10 @@ export async function scrollToPart(
 let HEADER_HEIGHT: number | undefined = undefined
 
 export function getHeaderHeight(): number {
+	if (queryStringParse(location.search)['hideRundownHeader'] === '1') {
+		return 0
+	}
+
 	if (HEADER_HEIGHT === undefined) {
 		const root = document.querySelector(
 			'#render-target > .container-fluid-custom > .rundown-view > .rundown-header'

packages/webui/src/client/ui/RundownView.tsx

@@ -1091,7 +1091,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 				case SegmentViewMode.Storyboard:
 					return <SegmentStoryboardContainer {...resolvedSegmentProps} />
 				case SegmentViewMode.List:
-					return <SegmentListContainer {...resolvedSegmentProps} />
+					return <SegmentListContainer {...resolvedSegmentProps} hideRundownHeader={this.props.hideRundownHeader} />
 				case SegmentViewMode.Timeline:
 				default:
 					return <SegmentTimelineContainer {...resolvedSegmentProps} />

packages/webui/src/client/ui/SegmentList/SegmentList.scss

@@ -701,6 +701,10 @@ $identifier-area-width: 3em;
 	padding: $segment-margin-y $segment-margin-x 0;
 	overflow: hidden;
 
+	&.no-rundown-header {
+		margin-top: 0;
+	}
+
 	.segment-opl__title {
 		background: $segment-background-color;
 		border-top-left-radius: $segment-border-radius;

packages/webui/src/client/ui/SegmentList/SegmentList.tsx

@@ -39,6 +39,8 @@ interface IProps {
 	onContextMenu?: (contextMenuContext: IContextMenuContext) => void
 	onSwitchViewMode?: (newViewMode: SegmentViewMode) => void
 	onPieceDoubleClick?: (item: PieceUi, e: React.MouseEvent<HTMLDivElement>) => void
+
+	hideRundownHeader?: boolean
 }
 
 const SegmentListInner = React.forwardRef<HTMLDivElement, IProps>(function SegmentList(props, ref) {
@@ -238,6 +240,7 @@ const SegmentListInner = React.forwardRef<HTMLDivElement, IProps>(function Segme
 				onTimeUntilClick={onTimeUntilClick}
 				onSwitchViewMode={props.onSwitchViewMode}
 				onHeaderNoteClick={props.onHeaderNoteClick}
+				hideRundownHeader={props.hideRundownHeader}
 			/>
 			<div className="segment-opl__part-list">{parts}</div>
 		</div>

packages/webui/src/client/ui/SegmentList/SegmentListContainer.tsx

@@ -19,6 +19,7 @@ export const LIVELINE_HISTORY_SIZE = TIMELINE_LIVELINE_HISTORY_SIZE
 
 interface IProps extends IResolvedSegmentProps {
 	id: string
+	hideRundownHeader?: boolean
 }
 
 export const SegmentListContainer = withResolvedSegment<IProps>(function SegmentListContainer({
@@ -211,6 +212,7 @@ export const SegmentListContainer = withResolvedSegment<IProps>(function Segment
 				onSwitchViewMode={props.onSwitchViewMode}
 				onHeaderNoteClick={props.onHeaderNoteClick}
 				onPieceDoubleClick={props.onPieceDoubleClick}
+				hideRundownHeader={props.hideRundownHeader}
 			/>
 			{props.segmentui.showShelf && props.adLibSegmentUi && (
 				<RundownViewShelf

packages/webui/src/client/ui/SegmentList/SegmentListHeader.tsx

@@ -35,6 +35,7 @@ export function SegmentListHeader({
 	getSegmentContext,
 	onTimeUntilClick,
 	onHeaderNoteClick,
+	hideRundownHeader,
 }: Readonly<{
 	isDetached: boolean
 	isDetachedStick: boolean
@@ -54,6 +55,7 @@ export function SegmentListHeader({
 	onTimeUntilClick: () => void
 	getSegmentContext: () => IContextMenuContext
 	onHeaderNoteClick?: (segmentId: SegmentId, level: NoteSeverity) => void
+	hideRundownHeader?: boolean
 }>): JSX.Element {
 	const { t } = useTranslation()
 
@@ -194,6 +196,8 @@ export function SegmentListHeader({
 						'invert-flash': highlight,
 
 						'time-of-day-countdowns': useTimeOfDayCountdowns,
+
+						'no-rundown-header': hideRundownHeader,
 					})}
 				>
 					{contents}