diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
index 36f96e5de2..daefba21f6 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
+++ b/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);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
index 85688f727d..d1a0c7e35e 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
+++ b/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);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
index 7747317257..feb0979603 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
+++ b/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);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 6975854446..da4b209172 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/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 {