Adds images for view layout settings

src/webviews/apps/settings/partials/views.html

@@ -21,6 +21,7 @@
 					GitLens views can be configured to be shown in different side bar layouts to best match your
 					workflow
 				</p>
+
 				<div class="presets mb-1">
 					<div class="preset">
 						<a
@@ -30,6 +31,7 @@
 							>Source Control Layout (default)</a
 						>
 						<p>Shows all the views together on the Source Control side bar</p>
+						<img class="image__preview" src="#{webroot}/media/views-layout-scm.webp" loading="lazy" />
 					</div>
 					<div class="preset">
 						<a
@@ -39,6 +41,7 @@
 							>GitLens Layout</a
 						>
 						<p>Shows all the views together on the GitLens side bar</p>
+						<img class="image__preview" src="#{webroot}/media/views-layout-gitlens.webp" loading="lazy" />
 					</div>
 				</div>
 

src/webviews/apps/settings/settings.scss

@@ -226,10 +226,12 @@ header {
 	display: flex;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: 1em;
 }
 
 .preset {
 	text-align: center;
+	margin: 0 1em;
 
 	p {
 		color: var(--color-foreground--75);
@@ -239,6 +241,12 @@ header {
 		margin: -0.5em 1em 0.5em 1em;
 		text-align: center;
 	}
+
+	.image__preview {
+		display: flex;
+		width: auto;
+		margin-top: 1em;
+	}
 }
 
 section {

src/webviews/apps/welcome/welcome.html

@@ -269,6 +269,11 @@
 									>Source Control Layout (default)</a
 								>
 								<p>Shows all the views together on the Source Control side bar</p>
+								<img
+									class="image__preview"
+									src="#{webroot}/media/views-layout-scm.webp"
+									loading="lazy"
+								/>
 							</div>
 							<div class="preset">
 								<a
@@ -278,6 +283,11 @@
 									>GitLens Layout</a
 								>
 								<p>Shows all the views together on the GitLens side bar</p>
+								<img
+									class="image__preview"
+									src="#{webroot}/media/views-layout-gitlens.webp"
+									loading="lazy"
+								/>
 							</div>
 						</div>
 

src/webviews/apps/welcome/welcome.scss

@@ -200,10 +200,12 @@ header {
 	display: flex;
 	width: 100%;
 	flex-wrap: wrap;
+	gap: 1em;
 }
 
 .preset {
 	text-align: center;
+	margin: 0 1em;
 
 	p {
 		color: var(--color-foreground--75);
@@ -213,6 +215,12 @@ header {
 		margin: -0.5em 1em 0.5em 1em;
 		text-align: center;
 	}
+
+	.image__preview {
+		display: flex;
+		width: auto;
+		margin-top: 1em;
+	}
 }
 
 section {