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 :)
umbraco · Oct 14, 2024 · df532d2 · df532d2
1 parent 7631b3f
commit df532d2
Showing 1 changed file with 21 additions and 12 deletions.
diff --git 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);
+			}
 		`,
 	];
 }