From df532d2a0d59ef8c8abed45dd38ad4fe45d636b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B8ren=20Kottal?= <snielsen43@gmail.com>
Date: Mon, 14 Oct 2024 17:45:38 +0200
Subject: [PATCH] Adds gap between grouped buttons in settings welcome
 dashboard (#2457)

* Adds gap between grouped buttons to prevent them from sticking together on small screens

* Gremlins :)
---
 .../settings-welcome-dashboard.element.ts     | 33 ++++++++++++-------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/src/packages/settings/welcome/settings-welcome-dashboard.element.ts b/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
index dd8d091c2d..93b7206850 100644
--- a/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
+++ b/src/packages/settings/welcome/settings-welcome-dashboard.element.ts
@@ -29,18 +29,21 @@ export class UmbSettingsWelcomeDashboardElement extends UmbLitElement {
 							Ask a question in the community forum or our Discord community
 						</umb-localize>
 					</p>
-					<uui-button
-						look="primary"
-						href="https://our.umbraco.com/forum"
-						label=${this.localize.term('settingsDashboard_goForum')}
-						target="_blank"
-						rel="noopener"></uui-button>
-					<uui-button
-						look="primary"
-						href="https://discord.umbraco.com"
-						label=${this.localize.term('settingsDashboard_chatWithCommunity')}
-						target="_blank"
-						rel="noopener"></uui-button>
+
+					<div class="button-group">
+						<uui-button
+							look="primary"
+							href="https://our.umbraco.com/forum"
+							label=${this.localize.term('settingsDashboard_goForum')}
+							target="_blank"
+							rel="noopener"></uui-button>
+						<uui-button
+							look="primary"
+							href="https://discord.umbraco.com"
+							label=${this.localize.term('settingsDashboard_chatWithCommunity')}
+							target="_blank"
+							rel="noopener"></uui-button>
+					</div>
 				</uui-box>
 
 				<uui-box class="training">
@@ -115,6 +118,12 @@ export class UmbSettingsWelcomeDashboardElement extends UmbLitElement {
 					grid-template-columns: repeat(1, 1fr);
 				}
 			}
+
+			.button-group {
+				display: flex;
+				flex-wrap: wrap;
+				gap: var(--uui-size-space-2);
+			}
 		`,
 	];
 }