From b2cc8487aed1a2df99d6b3252670269a93736a56 Mon Sep 17 00:00:00 2001
From: Jackson Kearl <jakearl@microsoft.com>
Date: Thu, 3 Jun 2021 11:50:08 -0700
Subject: [PATCH] Flip positioning of steps and media in narrow layouts. Closes
 #125246

---
 .../gettingStarted/browser/gettingStarted.css | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
index a9819509cea..bc2a725f772 100644
--- a/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
+++ b/src/vs/workbench/contrib/welcome/gettingStarted/browser/gettingStarted.css
@@ -429,30 +429,30 @@
 
 	grid-template-columns: minmax(auto, 400px) 1fr;
 	grid-template-rows: minmax(40px, 20%) auto max-content 1fr;
-	grid-column-gap: 20px;
+	column-gap: 20px;
 	grid-template-areas:
-	"back img"
-	"title img"
-	"steps img"
-	". img"
+	"back media"
+	"title media"
+	"steps media"
+	". media"
 	;
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent {
 	max-width: 500px;
 	grid-template-columns: auto;
-	grid-template-rows: 30px auto minmax(30%, 40%) 1fr;
-	grid-column-gap: 20px;
+	grid-template-rows: 30px max-content minmax(0, max-content) minmax(30%, 1fr);
+	row-gap: 4px;
 	grid-template-areas:
 	"back"
 	"title"
-	"img"
 	"steps"
+	"media"
 	;
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained.height-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent {
-	grid-template-rows: 0 auto minmax(40%, 50%) 1fr;
+	grid-template-rows: 0 max-content minmax(0, max-content) minmax(30%, 1fr);
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .prev-button {
@@ -469,14 +469,21 @@
 }
 
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media {
-	grid-area: img;
+	grid-area: media;
 	align-self: center;
 }
+
 .monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.markdown {
 	height: inherit;
 }
 
+.monaco-workbench .part.editor > .content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.image {
+	grid-area: steps-start / media-start / steps-end / media-end;
+	align-self: unset;
+}
+
 .monaco-workbench .part.editor > .content .gettingStartedContainer.width-semi-constrained .gettingStartedSlideDetails .gettingStartedDetailsContent > .getting-started-media.image {
+	grid-area: media;
 	height: inherit;
 	width: inherit;
 	display: flex;