bbc · anteeek · Jan 6, 2026
diff --git a/packages/meteor-lib/src/triggers/RundownViewEventBus.ts b/packages/meteor-lib/src/triggers/RundownViewEventBus.ts
@@ -48,6 +48,7 @@ export enum RundownViewEvents {
 
 	TOGGLE_SHELF_DROPZONE = 'toggleShelfDropzone',
 	ITEM_DROPPED = 'itemDropped',
+	CLOSE_NOTIFICATIONS = 'closeNotifications',
 }
 
 export interface IEventContext {
@@ -156,6 +157,7 @@ export interface RundownViewEventBusEvents {
 	[RundownViewEvents.CREATE_SNAPSHOT_FOR_DEBUG]: [e: BaseEvent]
 	[RundownViewEvents.TOGGLE_SHELF_DROPZONE]: [e: ToggleShelfDropzoneEvent]
 	[RundownViewEvents.ITEM_DROPPED]: [e: ItemDroppedEvent]
+	[RundownViewEvents.CLOSE_NOTIFICATIONS]: []
 }
 
 class RundownViewEventBus0 extends EventEmitter<RundownViewEventBusEvents> {}

diff --git a/packages/webui/src/client/styles/propertiesPanel.scss b/packages/webui/src/client/styles/propertiesPanel.scss
@@ -32,6 +32,10 @@
 		background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.15) 100%);
 	}
 
+	.propertiespanel-pop-up__label-with-icon {
+		margin-left: 0.5em;
+	}
+
 	.propertiespanel-pop-up {
 		background: #2e2e2e;
 		border-radius: 1px;
@@ -64,8 +68,6 @@
 			letter-spacing: 0.5px;
 
 			> .svg {
-				width: 1em;
-				height: 1.2em;
 				flex-shrink: 0;
 			}
 			> .title {
@@ -87,13 +89,16 @@
 				flex-shrink: 0;
 			}
 			> .propertiespanel-pop-up_close {
-				height: 1em;
-				margin-left: 1em;
 				background-color: unset;
 				border: none;
 			}
 		}
 
+		.propertiespanel-pop-up__buttons-container {
+			display: flex;
+			gap: 0.5em;
+		}
+
 		> .propertiespanel-pop-up__footer {
 			flex: 1;
 			flex: 0 0 0;
@@ -109,7 +114,9 @@
 
 			> .propertiespanel-pop-up__button,
 			.propertiespanel-pop-up__button-group .propertiespanel-pop-up__button {
-				display: block;
+				display: flex;
+				gap: 0.5em;
+				align-items: center;
 
 				border-radius: 5px;
 				border: 1px solid #7f7f7f;
@@ -227,14 +234,14 @@
 			}
 
 			.propertiespanel-pop-up__button {
-				// margin-top: 10px;
 				background: #636363;
 				padding: 10px;
-				gap: 10px;
 				border-radius: 5px;
 				border: 1px solid #7f7f7f;
 				color: #dfdfdf;
 
+				gap: 0.5em;
+
 				font-size: 0.875em;
 				font-weight: 500;
 
@@ -266,63 +273,6 @@
 					width: 100%;
 				}
 
-				// // Force the base input-l class
-				// .input-l {
-				// 	width: 100% !important;
-				// 	max-width: none !important;
-				// 	margin-left: 0px;
-				// 	border: none;
-				// }
-
-				// // Force the select/text-input defaults
-				// .select,
-				// .inline-select,
-				// .text-input {
-				// 	display: block !important;
-				// 	position: relative;
-				// 	width: 100% !important;
-				// }
-
-				// .input {
-				// 	border: 1px solid #e5e7eb;
-				// 	border-radius: 0.375rem;
-				// 	padding: 0.5rem 0.75rem;
-				// 	width: 100%;
-
-				// 	&:focus {
-				// 		outline: none;
-				// 		border-color: #3b82f6;
-				// 		box-shadow: 0 0 0 1px #3b82f6;
-				// 		background-color: unset !important; // origo >.>
-				// 	}
-				// }
-
-				// .label-text {
-				// 	&:before {
-				// 		content: none !important;
-				// 	}
-				// }
-
-				// .dropdown {
-				// 	background: white;
-				// 	border: 1px solid #e5e7eb;
-				// 	border-radius: 0.375rem;
-				// 	width: 100%;
-				// 	max-width: 100%;
-
-				// 	.input,
-				// 	.input-l {
-				// 		border: none;
-				// 		outline: none;
-				// 		box-shadow: none;
-				// 	}
-
-				// 	&:focus-within {
-				// 		border-color: #3b82f6;
-				// 		box-shadow: 0 0 0 1px #3b82f6;
-				// 	}
-				// }
-
 				.form-switch {
 					margin: 0.5rem 0;
 
@@ -337,13 +287,6 @@
 					margin-bottom: 0.5rem; // Increased spacing between label and selector
 					margin-top: 0.5rem; // Clearance from the previous
 				}
-
-				// .label {
-				// 	font-size: 0.875rem;
-				// 	font-weight: 500;
-				// 	color: #374151;
-				// 	display: block;
-				// }
 			}
 		}
 	}

diff --git a/packages/webui/src/client/styles/rundownView.scss b/packages/webui/src/client/styles/rundownView.scss
@@ -161,7 +161,7 @@ $break-width: 35rem;
 	}
 
 	&.properties-panel-open {
-		padding-right: $properties-panel-width;
+		padding-right: calc(#{$properties-panel-width} - 3.5em);
 		transition: 0s padding-right 1s;
 
 		> .rundown-header .rundown-overview {
@@ -209,8 +209,13 @@ body.no-overflow {
 	bottom: 0;
 	right: 0;
 
-	background:
-		linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
+	background: linear-gradient(
+			-45deg,
+			$color-status-fatal 33%,
+			transparent 33%,
+			transparent 66%,
+			$color-status-fatal 66%
+		),
 		linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
 		linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%),
 		linear-gradient(-45deg, $color-status-fatal 33%, transparent 33%, transparent 66%, $color-status-fatal 66%);
@@ -1100,8 +1105,7 @@ svg.icon {
 		}
 		.segment-timeline__part {
 			.segment-timeline__part__invalid-cover {
-				background-image:
-					repeating-linear-gradient(
+				background-image: repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,
 						var(--invalid-reason-color-transparent) 4px,
@@ -1383,8 +1387,7 @@ svg.icon {
 						left: 2px;
 						right: 2px;
 						z-index: 3;
-						background:
-							repeating-linear-gradient(
+						background: repeating-linear-gradient(
 								45deg,
 								var(--invalid-reason-color-opaque) 0,
 								var(--invalid-reason-color-opaque) 5px,
@@ -1566,8 +1569,7 @@ svg.icon {
 				right: 1px;
 				z-index: 10;
 				pointer-events: all;
-				background-image:
-					repeating-linear-gradient(
+				background-image: repeating-linear-gradient(
 						45deg,
 						var(--invalid-reason-color-transparent) 0%,
 						var(--invalid-reason-color-transparent) 5px,

diff --git a/packages/webui/src/client/ui/RundownView.tsx b/packages/webui/src/client/ui/RundownView.tsx
@@ -378,6 +378,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 
 			RundownViewEventBus.on(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment)
 			RundownViewEventBus.on(RundownViewEvents.GO_TO_TOP, this.onGoToTop)
+			RundownViewEventBus.on(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications)
 
 			if (this.props.playlist) {
 				documentTitle.set(this.props.playlist.name)
@@ -621,6 +622,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_LIVE_SEGMENT, this.onGoToLiveSegment)
 			RundownViewEventBus.off(RundownViewEvents.GO_TO_TOP, this.onGoToTop)
+			RundownViewEventBus.off(RundownViewEvents.CLOSE_NOTIFICATIONS, this.onCloseNotifications)
 		}
 
 		private onBeforeUnload = (e: any) => {
@@ -904,6 +906,12 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 			)
 		}
 
+		private onCloseNotifications = () => {
+			this.setState({
+				isNotificationsCenterOpen: undefined,
+			})
+		}
+
 		private onToggleSupportPanel = () => {
 			this.setState({
 				isSupportPanelOpen: !this.state.isSupportPanelOpen,
@@ -1369,6 +1377,7 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 				>
 					<SelectedElementsContext.Consumer>
 						{(selectionContext) => {
+							const isPropertiesPanelOpen = selectionContext.listSelectedElements().length > 0
 							return (
 								<div
 									className={classNames('rundown-view', {
@@ -1461,13 +1470,13 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 									</ErrorBoundary>
 									<ErrorBoundary>
 										<AnimatePresence>
-											{this.state.isNotificationsCenterOpen && (
+											{!isPropertiesPanelOpen && this.state.isNotificationsCenterOpen && (
 												<NotificationCenterPanel
 													filter={this.state.isNotificationsCenterOpen}
 													hideRundownHeader={this.props.hideRundownHeader}
 												/>
 											)}
-											{!this.state.isNotificationsCenterOpen && selectionContext.listSelectedElements().length > 0 && (
+											{isPropertiesPanelOpen && (
 												<div>
 													<PropertiesPanel />
 												</div>
@@ -1518,7 +1527,10 @@ const RundownViewContent = translateWithTracker<IPropsWithReady & ITrackedProps,
 											onQueueNextSegment={this.onQueueNextSegment}
 											onSetQuickLoopStart={this.onSetQuickLoopStart}
 											onSetQuickLoopEnd={this.onSetQuickLoopEnd}
-											onEditProps={(selection) => selectionContext.clearAndSetSelection(selection)}
+											onEditProps={(selection) => {
+												this.setState({ isNotificationsCenterOpen: undefined })
+												selectionContext.clearAndSetSelection(selection)
+											}}
 											studioMode={this.props.userPermissions.studio}
 											enablePlayFromAnywhere={!!studio.settings.enablePlayFromAnywhere}
 											enableQuickLoop={!!studio.settings.enableQuickLoop}

diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentContextMenu.tsx
@@ -69,6 +69,25 @@ export const SegmentContextMenu = withTranslation()(
 				part?.instance._id !== this.props.playlist.nextPartInfo?.partInstanceId &&
 				part?.instance._id !== this.props.playlist.previousPartInfo?.partInstanceId
 
+			const segmentHasEditableContent = !!(
+				segment?.userEditOperations?.length ||
+				segment?.userEditProperties?.pieceTypeProperties ||
+				segment?.userEditProperties?.globalProperties ||
+				segment?.userEditProperties?.operations?.length
+			)
+			const partHasEditableContent = !!(
+				part?.instance.part.userEditOperations?.length ||
+				part?.instance.part.userEditProperties?.pieceTypeProperties ||
+				part?.instance.part.userEditProperties?.globalProperties ||
+				part?.instance.part.userEditProperties?.operations?.length
+			)
+			const pieceHasEditableContent = !!(
+				piece?.instance.piece.userEditOperations?.length ||
+				piece?.instance.piece.userEditProperties?.pieceTypeProperties ||
+				piece?.instance.piece.userEditProperties?.globalProperties ||
+				piece?.instance.piece.userEditProperties?.operations?.length
+			)
+
 			const canSetAsNext = !!this.props.playlist?.activationId
 
 			return segment?.orphaned !== SegmentOrphanedReason.ADLIB_TESTING ? (
@@ -108,7 +127,7 @@ export const SegmentContextMenu = withTranslation()(
 									/>
 								)}
 								<hr />
-								{this.props.enableUserEdits && (
+								{this.props.enableUserEdits && segmentHasEditableContent && (
 									<>
 										<hr />
 										<MenuItem
@@ -199,28 +218,35 @@ export const SegmentContextMenu = withTranslation()(
 									isFormEditable={isPartEditAble}
 								/>
 
-								{this.props.enableUserEdits && (
-									<>
-										<hr />
-										<MenuItem
-											onClick={() => this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })}
-										>
-											<span>{t('Edit Segment Properties')}</span>
-										</MenuItem>
-										<MenuItem
-											onClick={() => this.props.onEditProps({ type: 'part', elementId: part.instance.part._id })}
-										>
-											<span>{t('Edit Part Properties')}</span>
-										</MenuItem>
-										{piece && piece.instance.piece.userEditProperties && (
-											<MenuItem
-												onClick={() => this.props.onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}
-											>
-												<span>{t('Edit Piece Properties')}</span>
-											</MenuItem>
-										)}
-									</>
-								)}
+								{this.props.enableUserEdits &&
+									(segmentHasEditableContent || partHasEditableContent || pieceHasEditableContent) && (
+										<>
+											<hr />
+											{segmentHasEditableContent && (
+												<MenuItem
+													onClick={() =>
+														this.props.onEditProps({ type: 'segment', elementId: part.instance.segmentId })
+													}
+												>
+													<span>{t('Edit Segment Properties')}</span>
+												</MenuItem>
+											)}
+											{partHasEditableContent && (
+												<MenuItem
+													onClick={() => this.props.onEditProps({ type: 'part', elementId: part.instance.part._id })}
+												>
+													<span>{t('Edit Part Properties')}</span>
+												</MenuItem>
+											)}
+											{pieceHasEditableContent && (
+												<MenuItem
+													onClick={() => this.props.onEditProps({ type: 'piece', elementId: piece.instance.piece._id })}
+												>
+													<span>{t('Edit Piece Properties')}</span>
+												</MenuItem>
+											)}
+										</>
+									)}
 							</>
 						)}
 					</ContextMenu>

diff --git a/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx b/packages/webui/src/client/ui/SegmentTimeline/SegmentTimeline.tsx
@@ -1057,8 +1057,18 @@ export class SegmentTimelineClass extends React.Component<Translated<WithTiming<
 							<div
 								onDoubleClick={() => {
 									if (this.props.studio.settings.enableUserEdits) {
-										if (!selectElementContext.isSelected(this.props.segment._id)) {
-											selectElementContext.clearAndSetSelection({ type: 'segment', elementId: this.props.segment._id })
+										const segment = this.props.segment
+
+										const hasEditableContent = !!(
+											segment.userEditOperations?.length ||
+											segment.userEditProperties?.pieceTypeProperties ||
+											segment.userEditProperties?.globalProperties ||
+											segment.userEditProperties?.operations?.length
+										)
+										if (!hasEditableContent) return
+
+										if (!selectElementContext.isSelected(segment._id)) {
+											selectElementContext.clearAndSetSelection({ type: 'segment', elementId: segment._id })
 										} else {
 											selectElementContext.clearSelections()
 										}