Fix video layout in walkthroughs

microsoft · Feb 4, 2025 · dc2b025 · dc2b025
1 parent a58d48f
commit dc2b025
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 39 deletions.
diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts
@@ -213,46 +213,15 @@ export class GettingStartedDetailsRenderer {
 					video {
 						max-width: 100%;
 						max-height: 100%;
-					object-fit: cover;
-					}
-					vertically-centered {
-						display: flex;
-						justify-content: center; /* Centers horizontally */
-						align-items: center; /* Centers vertically */
-						height: 100vh; /* Added missing semicolon */
+						object-fit: cover;
 					}
 				</style>
 			</head>
 			<body>
-				<vertically-centered>
-					<video controls autoplay loop ${poster ? `poster="${poster?.toString(true)}"` : ''} muted>
-						<source src="${path.toString(true)}" type="video/mp4">
-					</video>
-				</vertically-centered>
+				<video controls autoplay loop ${poster ? `poster="${poster?.toString(true)}"` : ''} muted>
+					<source src="${path.toString(true)}" type="video/mp4">
+				</video>
 			</body>
-
-			<script nonce="${nonce}">
-				let ongoingLayout = undefined;
-				const doLayout = () => {
-					document.querySelectorAll('vertically-centered').forEach(element => {
-						element.style.marginTop = Math.max((document.body.clientHeight - element.scrollHeight) * 3/10, 0) + 'px';
-					});
-					ongoingLayout = undefined;
-				};
-
-				const layout = () => {
-					if (ongoingLayout) {
-						clearTimeout(ongoingLayout);
-					}
-					ongoingLayout = setTimeout(doLayout, 0);
-				};
-
-				layout();
-
-				document.querySelectorAll('video').forEach(element => {
-					element.addEventListener('loadeddata', layout);
-				});
-		</script>
 		</html>`;
 	}
 

diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css
@@ -530,7 +530,7 @@
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent {
 	height: 100%;
-	max-width: 1200px;
+	max-width: 80%;
 	margin: 0 auto;
 	padding: 0 32px;
 	display: grid;
@@ -580,10 +580,12 @@
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent.video > .getting-started-media {
-	grid-area: title-start / media-start / steps-end / media-end;
-	align-self: unset;
+	grid-area: steps-start / media-start / footer-start / media-end;
+	align-self: self-start;
 	display: flex;
-	justify-content: center;
+	justify-content:center ;
+	height: 100%;
+	width: 100%;
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent.video > .getting-started-media {
@@ -613,6 +615,11 @@
 	justify-content: center;
 }
 
+.monaco-workbench .part.editor > .content .gettingStartedContainer.width-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent.image > .getting-started-media,
+.monaco-workbench .part.editor > .content .gettingStartedContainer.width-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent.video > .getting-started-media {
+	display: none;
+}
+
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media > video {
 	max-width: 100%;
 	max-height: 100%;