Merge pull request #1191 from umbraco/bugfix/beautify-sorter-example

beautify example

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts

@@ -75,6 +75,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 
 			.outer-wrapper {
 				display: flex;
+				gap: var(--uui-size-layout-1);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts

@@ -78,6 +78,9 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			:host {
 				display: block;
 				width: 100%;
+				border: 1px dashed rgba(122, 122, 122, 0.25);
+				border-radius: calc(var(--uui-border-radius) * 2);
+				padding: var(--uui-size-space-1);
 			}
 
 			.sorter-placeholder {
@@ -87,14 +90,6 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			.sorter-container {
 				min-height: 20px;
 			}
-
-			example-sorter-group {
-				display: block;
-				width: 100%;
-				border: 1px dashed rgba(122, 122, 122, 0.25);
-				border-radius: calc(var(--uui-border-radius) * 2);
-				padding: var(--uui-size-space-1);
-			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts

@@ -57,6 +57,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 
 			.outer-wrapper {
 				display: flex;
+				gap: var(--uui-size-layout-1);
 			}
 		`,
 	];

src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts

@@ -69,6 +69,9 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			:host {
 				display: block;
 				width: 100%;
+				border: 1px dashed rgba(122, 122, 122, 0.25);
+				border-radius: calc(var(--uui-border-radius) * 2);
+				padding: var(--uui-size-space-1);
 			}
 
 			.sorter-placeholder {