fix: split multiple status messages onto separate lines

Author: Julusian

packages/webui/src/client/ui/FloatingInspectors/VTFloatingInspector.tsx

@@ -38,7 +38,6 @@ function renderNotice(
 	noticeLevel: NoticeLevel,
 	noticeMessages: ReadonlyDeep<ITranslatableMessage[]> | null
 ): JSX.Element {
-	const messagesStr = noticeMessages ? noticeMessages.map((msg) => translateMessage(msg, t)).join('; ') : ''
 	return (
 		<>
 			<div className="segment-timeline__mini-inspector__notice-header">
@@ -48,7 +47,14 @@ function renderNotice(
 					<WarningIconSmall />
 				) : null}
 			</div>
-			<div className="segment-timeline__mini-inspector__notice">{messagesStr}</div>
+			<div className="segment-timeline__mini-inspector__notice">
+				{noticeMessages?.map((msg) => (
+					<>
+						{translateMessage(msg, t)}
+						<br />
+					</>
+				))}
+			</div>
 		</>
 	)
 }

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

@@ -603,10 +603,6 @@ class RundownViewNotifier extends WithManagedTracker {
 
 				let newNotification: Notification | undefined = undefined
 				if (status !== PieceStatusCode.OK && status !== PieceStatusCode.UNKNOWN) {
-					const messagesStr = messages.length
-						? messages.map((msg) => translateMessage(msg, t)).join('; ')
-						: t('There is an unspecified problem with the source.')
-
 					const issueName = typeof issue.name === 'string' ? issue.name : translateMessage(issue.name, t)
 					let messageName = issue.segmentName || issueName
 					if (issue.segmentName && issueName) {
@@ -619,7 +615,15 @@ class RundownViewNotifier extends WithManagedTracker {
 						(
 							<>
 								<h5>{messageName}</h5>
-								<div>{messagesStr}</div>
+								<div>
+									{messages.map((msg) => (
+										<>
+											{translateMessage(msg, t)}
+											<br />
+										</>
+									))}
+									{messages.length === 0 && t('There is an unspecified problem with the source.')}
+								</div>
 							</>
 						),
 						issue.segmentId ? issue.segmentId : 'line_' + issue.partId,