Updates banner content

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+- Adds a banner to the _Commit Details_ view to let users know they can move the view to the Secondary Side Bar
+
 ## [13.0.2] - 2022-10-17
 
 ### Added

src/webviews/apps/commitDetails/commitDetails.html

@@ -43,59 +43,59 @@
 				<p>To best take advantage of this view, we highly recommend moving it to the Secondary Side Bar.</p> -->
 			</div>
 			<main class="commit-details commit-detail-panel__main" id="main" tabindex="-1">
-				<div class="commit-details__top">
-					<div class="commit-banner" data-region="sidebar-banner">
-						<code-icon class="commit-banner__icon" icon="layout-sidebar-right"></code-icon>
-						<div class="commit-banner__message">
-							<h2>Lock to Sidebar</h2>
-							<p>Drag and drop this component to the sidepanel to lock it into view.</p>
-						</div>
-						<svg
-							class="svg-themed commit-banner__media"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 101 49"
-						>
-							<g opacity=".2" stroke="#E6E8FA" class="svg-themed__outline">
-								<rect x=".5" y=".5" width="99.45" height="48" rx="2.5" />
-								<path d="M82 0v49M15.66 0v49M1.23 35.02h15.92" />
-							</g>
-							<rect
-								x="6.5"
-								y="29.5"
-								width="19"
-								height="14"
-								rx=".5"
-								fill="#2E3346"
-								stroke="#91D3FF"
-								class="svg-themed__view"
-							/>
-							<rect
-								x="85.5"
-								y="4.5"
-								width="11"
-								height="41"
-								rx=".5"
-								fill="#2E3346"
-								stroke="#91D3FF"
-								stroke-dasharray="2 2"
-								class="svg-themed__view"
-							/>
-							<path
-								d="M22.33 31a2.67 2.67 0 1 0 5.34 0 2.67 2.67 0 0 0-5.34 0ZM76 7l-5.09-2.73.18 5.77L76 7ZM25.42 31.28c4.91-7.46 20.77-22.07 46.1-23.64l-.05-1c-25.7 1.59-41.82 16.4-46.89 24.08l.84.56Z"
-								fill="#91D3FF"
-								class="svg-themed__line"
-							/>
-						</svg>
-						<a
-							class="commit-banner__icon commit-details__commit-action"
-							href="#"
-							data-action="dismiss-banner"
-							aria-label="Dismiss banner"
-							title="Dismiss banner"
-							><code-icon icon="chrome-close"></code-icon
-						></a>
+				<div class="commit-banner" data-region="sidebar-banner">
+					<code-icon class="commit-banner__icon" icon="layout-sidebar-right"></code-icon>
+					<div class="commit-banner__message">
+						<h2>Move into Secondary Side Bar</h2>
+						<p>For a better experience, drag and drop this view into the Secondary Side Bar.</p>
 					</div>
+					<svg
+						class="svg-themed commit-banner__media"
+						fill="none"
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 101 49"
+					>
+						<g opacity=".2" stroke="#E6E8FA" class="svg-themed__outline">
+							<rect x=".5" y=".5" width="99.45" height="48" rx="2.5" />
+							<path d="M82 0v49M15.66 0v49M1.23 35.02h15.92" />
+						</g>
+						<rect
+							x="6.5"
+							y="29.5"
+							width="19"
+							height="14"
+							rx=".5"
+							fill="#2E3346"
+							stroke="#91D3FF"
+							class="svg-themed__view"
+						/>
+						<rect
+							x="85.5"
+							y="4.5"
+							width="11"
+							height="41"
+							rx=".5"
+							fill="#2E3346"
+							stroke="#91D3FF"
+							stroke-dasharray="2 2"
+							class="svg-themed__view"
+						/>
+						<path
+							d="M22.33 31a2.67 2.67 0 1 0 5.34 0 2.67 2.67 0 0 0-5.34 0ZM76 7l-5.09-2.73.18 5.77L76 7ZM25.42 31.28c4.91-7.46 20.77-22.07 46.1-23.64l-.05-1c-25.7 1.59-41.82 16.4-46.89 24.08l.84.56Z"
+							fill="#91D3FF"
+							class="svg-themed__line"
+						/>
+					</svg>
+					<a
+						class="commit-banner__icon commit-details__commit-action"
+						href="#"
+						data-action="dismiss-banner"
+						aria-label="Dismiss banner"
+						title="Dismiss banner"
+						><code-icon icon="chrome-close"></code-icon
+					></a>
+				</div>
+				<div class="commit-details__top">
 					<div class="commit-details__top-menu">
 						<ul class="commit-details__authors" aria-label="Authors">
 							<li class="commit-details__author" data-region="author">

src/webviews/apps/commitDetails/commitDetails.scss

@@ -250,7 +250,7 @@ ul {
 	gap: 0.4rem;
 	font-size: 1.2rem;
 	border-radius: 0.3rem;
-	margin-bottom: 1rem;
+	margin: 1rem;
 
 	.vscode-high-contrast &,
 	.vscode-dark & {
@@ -292,6 +292,7 @@ ul {
 		min-width: 10rem;
 		flex-basis: 40%;
 		max-width: 12rem;
+		margin-right: 0.6rem;
 	}
 
 	&__icon {