feat(layout): set max inline size for the whole content

kingsdigitallab · Nov 4, 2024 · c1276df · c1276df
1 parent 47a9e62
commit c1276df
Showing 1 changed file with 24 additions and 14 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -20,26 +20,36 @@
 	<Head {metadata} />
 </svelte:head>
 
-<div class="layout surface-1">
-	<Header />
-
-	<main>
-		<PageTransition url={data.url}>
-			<Breadcrumbs />
-			<div class="body">
-				<slot />
-			</div>
-		</PageTransition>
-	</main>
-
-	<Footer />
+<div class="layout-container">
+	<div class="layout surface-1">
+		<Header />
+
+		<main>
+			<PageTransition url={data.url}>
+				<Breadcrumbs />
+				<div class="body">
+					<slot />
+				</div>
+			</PageTransition>
+		</main>
+
+		<Footer />
+	</div>
 </div>
 
 <style>
+	.layout-container {
+		background: var(--surface-4);
+		display: flex;
+		justify-content: center;
+		min-height: 100%;
+	}
+
 	.layout {
 		display: grid;
 		grid-template-rows: auto 1fr auto;
-		height: 100%;
+		max-inline-size: var(--size-xl);
+		width: 100%;
 	}
 
 	main {