Increases gap between start work and create branch buttons

Author: axosoft-ramint

src/webviews/apps/plus/home/components/launchpad.ts

@@ -155,7 +155,7 @@ export class GlLaunchpad extends SignalWatcher(LitElement) {
 			<gl-section>
 				<span slot="heading">GitLens Launchpad</span>
 				<div class="summary">${this.renderSummaryResult()}</div>
-				<button-container>
+				<button-container gap="wide">
 					<gl-button full class="start-work" href=${this.startWorkCommand}>Start Work on an Issue</gl-button>
 					<gl-button
 						appearance="secondary"

src/webviews/apps/shared/components/button-container.ts

@@ -8,6 +8,8 @@ export class ButtonContainer extends LitElement {
 		elementBase,
 		css`
 			:host {
+				--button-group-gap: 0.4rem;
+				--button-group-wide-gap: 1rem;
 				display: block;
 				max-width: 30rem;
 				margin-right: auto;
@@ -24,16 +26,23 @@ export class ButtonContainer extends LitElement {
 
 			.group {
 				display: inline-flex;
-				gap: 0.4rem;
+				gap: var(--button-group-gap);
 				width: 100%;
 				max-width: 30rem;
 			}
+
+			:host([gap='wide']) .group {
+				gap: var(--button-group-wide-gap);
+			}
 		`,
 	];
 
 	@property({ type: Boolean })
 	editor = false;
 
+	@property({ reflect: true })
+	gap?: 'wide';
+
 	override render() {
 		return html`<div class="group"><slot></slot></div>`;
 	}