From dc2b025a401c1892cf640a7212259a1ac926af20 Mon Sep 17 00:00:00 2001 From: bhavyaus Date: Tue, 4 Feb 2025 11:52:21 -0800 Subject: [PATCH] Fix video layout in walkthroughs --- .../browser/gettingStartedDetailsRenderer.ts | 39 ++----------------- .../browser/media/gettingStarted.css | 15 +++++-- 2 files changed, 15 insertions(+), 39 deletions(-) diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts b/src/vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer.ts index 8fc561417acbf..d2be9cd030953 100644 --- 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; } - - - + - - `; } diff --git a/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css b/src/vs/workbench/contrib/welcomeGettingStarted/browser/media/gettingStarted.css index 3edd78f864009..cd312dfbe331d 100644 --- 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%;