Add responsive padding for small screens

Author: TorstenDittmann

packages/main/src/_global.scss

@@ -12,12 +12,3 @@ html {
 	outline-color: var(--color);
 	border-color: var(--border);
 }
-
-@media (max-width: map.get(
-		breakpoints.$breakpoints,
-		"small"
-	)) {
-	body {
-		/* margin: 1rem; */
-	}
-}

packages/main/src/layouts/_dashboard.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @use "../partials/breakpoints";
 
 [data-layout="dashboard"] {
@@ -18,6 +19,12 @@
 			margin-inline: auto;
 			margin-block-start: 1rem;
 			@include breakpoints.container;
+			@media (max-width: map.get(
+					breakpoints.$breakpoints,
+					"small"
+				)) {
+				padding-inline: 1rem;
+			}
 		}
 		footer {
 			grid-area: footer;

packages/main/src/layouts/_website.scss

@@ -8,6 +8,12 @@
 		"header"
 		"main"
 		"footer";
+	@media (max-width: map.get(
+			breakpoints.$breakpoints,
+			"small"
+		)) {
+		padding: 1rem;
+	}
 	>  {
 		header {
 			grid-area: header;