fix(RundownListItemView): the "Live" Rundown indicator is positioned incorrectly

Author: jstarpl

packages/webui/src/client/styles/rundownList.scss

@@ -74,13 +74,12 @@
 	}
 
 	.rundown-list-item__name {
-		display: inline-block;
-		align-self: center;
+		display: inline-flex;
 		align-items: center;
 		letter-spacing: inherit;
 
 		.rundown-name {
-			font-weight: bold;
+			font-weight: 500;
 			> a > svg {
 				margin-right: 0;
 			}
@@ -94,6 +93,17 @@
 		margin-left: 1em;
 		vertical-align: top;
 	}
+	.rundown-list-item__indicator {
+		align-self: stretch;
+		flex: 1 0;
+		display: grid;
+		align-items: center;
+		justify-content: end;
+
+		> .origo-pulse {
+			top: unset;
+		}
+	}
 	.rundown-list-item__text {
 		display: inline-flex;
 		align-self: center;
@@ -286,10 +296,6 @@
 					margin-bottom: 0;
 					position: relative;
 
-					> .rundown-list-item__name > b {
-						font-weight: 500;
-					}
-
 					&::before,
 					&::after {
 						content: '';

packages/webui/src/client/ui/RundownList/RundownListItemView.tsx

@@ -98,33 +98,31 @@ export default React.memo(function RundownListItemView({
 				<span></span>
 			)}
 			<span className="rundown-list-item__name" role="rowheader">
-				<div className="grid-buttons-right">
-					<span className="rundown-name">{rundownNameContent}</span>
-					{rundown.description ? (
-						<Tooltip overlay={rundown.description} trigger={['hover']} placement="right">
-							<span className="rundown-list-description__icon">
-								<PathIcon />
-							</span>
-						</Tooltip>
-					) : null}
+				<span className="rundown-name">{rundownNameContent}</span>
+				{rundown.description ? (
+					<Tooltip overlay={rundown.description} trigger={['hover']} placement="right">
+						<span className="rundown-list-description__icon">
+							<PathIcon />
+						</span>
+					</Tooltip>
+				) : null}
 
-					<div>
-						{isActive === true ? (
-							<Tooltip
-								overlay={t('This rundown is currently active')}
-								mouseEnterDelay={TOOLTIP_DEFAULT_DELAY}
-								placement="bottom"
-							>
-								<div className="origo-pulse small me-2">
-									<div className="pulse-marker">
-										<div className="pulse-rays"></div>
-										<div className="pulse-rays delay"></div>
-									</div>
+				<span className="rundown-list-item__indicator">
+					{isActive === true ? (
+						<Tooltip
+							overlay={t('This rundown is currently active')}
+							mouseEnterDelay={TOOLTIP_DEFAULT_DELAY}
+							placement="bottom"
+						>
+							<div className="origo-pulse small me-2">
+								<div className="pulse-marker">
+									<div className="pulse-rays"></div>
+									<div className="pulse-rays delay"></div>
 								</div>
-							</Tooltip>
-						) : null}
-					</div>
-				</div>
+							</div>
+						</Tooltip>
+					) : null}
+				</span>
 			</span>
 			{/* <RundownListItemProblems warnings={warnings} errors={errors} /> */}
 			<span className="rundown-list-item__text" role="gridcell">