Enhances welcome UI for better scaling and narrow view support

Refines font sizing and spacing units from rem to em to improve
consistency and responsiveness across devices. Updates carousel
and feature card layouts for better display on small screens,
including improved media queries and more flexible padding.
Adjusts section and header styling to ensure readability and
visual alignment, especially on mobile.

(#4769, #4773, PLG-138)

Author: sergeibbb

src/webviews/apps/welcome/components/feature-carousel.ts

@@ -17,15 +17,15 @@ export class GlFeatureCarousel extends LitElement {
 			:host {
 				--gl-carousel-border-radius: 0;
 				--gl-carousel-background-color: transparent;
-				--gl-carousel-padding: 1rem;
+				--gl-carousel-padding: 1em;
 
 				display: block;
 				width: 100%;
 			}
 
 			.carousel {
 				display: flex;
-				gap: 1rem;
+				gap: 1em;
 				justify-content: center;
 			}
 
@@ -124,19 +124,39 @@ export class GlFeatureCard extends LitElement {
 		css`
 			:host {
 				display: flex;
-				gap: 1rem;
+				gap: 1em;
 			}
 
 			.image {
 				width: 50%;
 			}
 
 			.content {
-				margin-top: 0.5rem;
+				margin-top: 0.5em;
 				flex: 1;
 				display: flex;
 				flex-direction: column;
-				gap: 0.5rem;
+				gap: 0.5em;
+			}
+
+			@media (max-width: 640px) {
+				:host {
+					flex-direction: column;
+				}
+
+				.image {
+					width: 100%;
+				}
+
+				.content {
+					margin-top: 0;
+					margin-left: 0.3em;
+					margin-right: 0.3em;
+				}
+
+				::slotted(*) {
+					width: 100%;
+				}
 			}
 		`,
 	];

src/webviews/apps/welcome/welcome.css.ts

@@ -13,16 +13,25 @@ const colorScheme = css`
 
 const typography = css`
 	:host {
-		--h1-font-size: 1.4rem;
-		--p-font-size: 1rem;
-		--card-font-size: var(--vscode-font-size);
+		font-size: var(--vscode-font-size);
+
+		--h1-font-size: 1.7em;
+		--p-font-size: 1.23em;
+		--card-font-size: 1em;
 	}
 
 	@media (max-width: 640px) {
 		:host {
-			--h1-font-size: 0.75rem;
-			--p-font-size: 0.7rem;
-			--card-font-size: var(--vscode-editor-font-size);
+			font-size: var(--vscode-editor-font-size);
+			--h1-font-size: 1em;
+			--p-font-size: 1em;
+			--card-font-size: 1em;
+		}
+	}
+
+	@media (max-width: 300px) {
+		:host {
+			font-size: calc(var(--vscode-editor-font-size) * 0.8);
 		}
 	}
 `;
@@ -60,14 +69,15 @@ const section = css`
 		justify-content: center;
 		align-items: center;
 		text-align: center;
-		font-size: var(--p-font-size);
-	}
-	.section p {
-		max-width: 30em;
 	}
 	.section .accent {
 		color: var(--accent-color);
 	}
+
+	.section.plain p {
+		max-width: 30em;
+		font-size: var(--p-font-size);
+	}
 `;
 
 const header = css`
@@ -104,26 +114,38 @@ const header = css`
 const carousel = css`
 	gl-feature-carousel {
 		text-align: initial;
-		--gl-carousel-border-radius: 0.65rem;
+		--gl-carousel-border-radius: 0.63em;
+		--gl-carousel-padding: 1.8em;
 		--gl-carousel-background-color: var(--vscode-textBlockQuote-background);
 	}
 
+	@media (max-width: 640px) {
+		gl-feature-carousel {
+			--gl-carousel-padding: 1em;
+		}
+	}
+
+	@media (max-width: 300px) {
+		gl-feature-carousel {
+			--gl-carousel-padding: 0.5em;
+		}
+	}
+
 	gl-feature-carousel h1 {
 		margin: 0;
 		font-size: var(--card-font-size);
 		color: var(--em-color);
 	}
 
 	gl-feature-carousel p {
-		margin: 0.4em 0;
+		margin: 0.4em 0 0;
 		font-size: var(--card-font-size);
 		color: var(--text-color);
 	}
 
 	gl-feature-carousel img {
 		max-width: 100%;
 		height: auto;
-		border-radius: 0.4rem;
 	}
 
 	gl-feature-carousel a {

src/webviews/apps/welcome/welcome.ts

@@ -30,15 +30,15 @@ export class GlWelcomeApp extends GlAppHost<State> {
 	override render(): unknown {
 		return html`
 			<div class="welcome scrollable">
-				<div class="section header">
+				<div class="section plain header">
 					<div class="logo"><gitlens-logo></gitlens-logo></div>
 					<h1>GitLens is now installed in Cursor</h1>
 					<p>
 						Understand every line of code — instantly. GitLens reveals authorship, activity, and history
 						inside the editor
 					</p>
 				</div>
-				<div class="section">
+				<div class="section plain">
 					<p>With <span class="accent">PRO</span> subscription you get more</p>
 				</div>