Updates home banners

src/webviews/apps/home/home.html

@@ -22,6 +22,14 @@
 		data-vscode-context='{ "webview": "#{webviewId}", "webviewInstance": "#{webviewInstanceId}" }'
 	>
 		<div class="home__nav">
+			<div class="promo-banner promo-banner--eyebrow" id="promo-pro50" hidden>
+				<a
+					class="promo-banner__link"
+					href="command:gitlens.plus.purchase"
+					title="Special: 50% off first seat of Pro — only $4/month!"
+					>Special: 50% off first seat of Pro — only $4/month!</a
+				>
+			</div>
 			<nav class="inline-nav" id="links" aria-label="Help and Resources">
 				<div class="inline-nav__group">
 					<a
@@ -141,11 +149,6 @@
 					50% off first seat of Pro — only $4/month!
 				</a>
 			</div>
-			<div class="promo-banner" id="promo-pro50" hidden>
-				<a class="promo-banner__link" href="command:gitlens.plus.purchase"
-					>Special: 50% off first seat of Pro — only $4/month!</a
-				>
-			</div>
 			<nav class="nav-list">
 				<h2 class="nav-list__title t-eyebrow">Popular views</h2>
 				<a

src/webviews/apps/home/home.scss

@@ -147,6 +147,11 @@ ul {
 	text-align: center;
 	margin-bottom: 1rem;
 
+	&--eyebrow {
+		color: var(--color-foreground--50);
+		margin-bottom: 0.2rem;
+	}
+
 	&__link {
 		display: inline-block;
 		font-size: 1.1rem;
@@ -161,9 +166,18 @@ ul {
 		}
 	}
 
+	&--eyebrow &__link {
+		display: block;
+		white-space: nowrap;
+		font-weight: normal;
+		max-width: 100%;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+
 	&__media {
 		// width: 100%;
-		max-width: 100%;
+		max-width: 8.6rem;
 		height: auto;
 
 		&.is-light {