feat: vt - inout add text in preview window

Author: olzzon

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

@@ -3148,7 +3148,7 @@ svg.icon {
 		> .video-preview,
 		> .thumbnail {
 			display: block;
-			width: 320px;
+			width: 420px;
 			height: 180px;
 			background: #000;
 		}
@@ -3263,6 +3263,10 @@ svg.icon {
 		word-break: break-all;
 		white-space: normal;
 	}
+	.mini-inspector__value__right {
+		position: absolute;
+		right: 0;
+	}
 	.mini-inspector__system {
 		font-weight: 300;
 		font-style: italic;

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

@@ -146,11 +146,15 @@ export const VTFloatingInspector: React.FC<IProps> = ({
 		>
 			{showMiniInspectorNotice && noticeLevel && renderNotice(t, noticeLevel, noticeMessages)}
 			{showMiniInspectorClipData && (
-				<div className="segment-timeline__mini-inspector__properties">
-					<span className="mini-inspector__value">{content?.fileName}</span>
-					<span className="mini-inspector__value">{content?.firstWords}</span>
-					<span className="mini-inspector__value">{content?.lastWords}</span>
-				</div>
+				<>
+					<div className="segment-timeline__mini-inspector__properties">
+						<span className="mini-inspector__value">{content?.fileName}</span>
+					</div>
+					<div className="segment-timeline__mini-inspector__properties">
+						<span className="mini-inspector__value">{content?.firstWords}</span>
+						<span className="mini-inspector__value__right">{content?.lastWords}</span>
+					</div>
+				</>
 			)}
 		</div>
 	)