Mobile layout adjustments

src/lib/components/Header.svelte

@@ -89,16 +89,13 @@
 	.header-content {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: $unit-3x;
 		pointer-events: auto;
 		width: 100%;
-		max-width: 900px;
-		margin: 0 auto;
 
 		@include breakpoint('phone') {
 			gap: $unit-2x;
-			max-width: none;
-			justify-content: center;
 		}
 	}
 

src/lib/components/Page.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
-	export let noHorizontalPadding = false
+	interface Props {
+		noHorizontalPadding?: boolean
+		class?: string
+	}
+
+	let { noHorizontalPadding = false, class: className = '' }: Props = $props()
 </script>
 
-<section class="page" class:no-horizontal-padding={noHorizontalPadding}>
+<section class="page {className}" class:no-horizontal-padding={noHorizontalPadding}>
 	<header>
 		<slot name="header" />
 	</header>

src/lib/components/ProjectList.svelte

@@ -56,6 +56,11 @@
 		justify-content: center;
 		width: 100%;
 
+		@include breakpoint('phone') {
+			box-sizing: border-box;
+			padding: 0 $unit-2x;
+		}
+
 		ul {
 			display: flex;
 			flex-direction: column;

src/lib/components/UniverseFeed.svelte

@@ -29,7 +29,8 @@
 	.universe-feed {
 		display: flex;
 		flex-direction: column;
-		gap: $unit-3x;
+		gap: $unit-2x;
+		padding: 0 $unit-2x;
 	}
 
 	.empty-container {

src/lib/components/admin/Button.svelte

@@ -170,7 +170,7 @@
 		align-items: center;
 		justify-content: center;
 		gap: $unit;
-		font-weight: 500;
+		font-weight: 400;
 		border: none;
 		cursor: pointer;
 		transition: all 0.15s ease;
@@ -211,7 +211,7 @@
 	}
 
 	.btn-medium {
-		padding: $unit $unit-2x;
+		padding: ($unit * 1.5) $unit-2x;
 		font-size: 14px;
 		border-radius: 24px;
 		min-height: 36px;

src/routes/about/+page.svelte

@@ -12,15 +12,16 @@
 	$: ({ albums, games, error } = data)
 </script>
 
-<Page>
+<section class="about-container">
+	<Page>
 		<svelte:fragment slot="header">
 			<h2>A little about me</h2>
 		</svelte:fragment>
 
 		<section class="bio">
 			<p>
-			Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in San
+				Hello! My name is <em>Justin Edmund</em>. I'm a software designer and developer living in
-			Francisco.
+				San Francisco.
 			</p>
 			<p>
 				Right now, I'm spending my free time building a hobby journaling app called <a
@@ -37,15 +38,15 @@
 				> in 2011 with a Bachelors of Arts in Communication Design.
 			</p>
 		</section>
-</Page>
+	</Page>
-<Page>
+	<Page>
 		<svelte:fragment slot="header">
 			<h2>Notable mentions</h2>
 		</svelte:fragment>
 
 		<MentionList />
-</Page>
+	</Page>
-<Page noHorizontalPadding={true}>
+	<Page noHorizontalPadding={true}>
 		<svelte:fragment slot="header">
 			<h2>Now playing</h2>
 		</svelte:fragment>
@@ -63,9 +64,27 @@
 			<p>Loading games...</p>
 		{/if}
 	</section> -->
-</Page>
+	</Page>
+</section>
 
 <style lang="scss">
+	.about-container {
+		display: flex;
+		flex-direction: column;
+		gap: $unit-2x;
+		justify-content: center;
+		max-width: 700px;
+		margin: 0 auto;
+
+		@include breakpoint('phone') {
+			padding: 0 $unit-2x;
+		}
+
+		:global(.page) {
+			margin: 0;
+		}
+	}
+
 	a,
 	em {
 		color: $red-60;

src/routes/labs/+page.svelte

@@ -39,7 +39,8 @@
 		padding: 0 $unit-2x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 

src/routes/labs/[slug]/+page.svelte

@@ -11,7 +11,8 @@
 	const error = $derived(data.error as string | undefined)
 </script>
 
-{#if error}
+<div class="project-page-container">
+	{#if error}
 		<Page>
 			<div slot="header" class="error-header">
 				<h1>Error</h1>
@@ -21,11 +22,11 @@
 				<a href="/labs" class="back-link">← Back to labs</a>
 			</div>
 		</Page>
-{:else if !project}
+	{:else if !project}
 		<Page>
 			<div class="loading">Loading project...</div>
 		</Page>
-{:else if project.status === 'list-only'}
+	{:else if project.status === 'list-only'}
 		<Page>
 			<div slot="header" class="error-header">
 				<h1>Project Not Available</h1>
@@ -35,7 +36,7 @@
 				<a href="/labs" class="back-link">← Back to labs</a>
 			</div>
 		</Page>
-{:else if project.status === 'password-protected'}
+	{:else if project.status === 'password-protected'}
 		<Page>
 			<ProjectPasswordProtection
 				projectSlug={project.slug}
@@ -61,11 +62,14 @@
 				{/snippet}
 			</ProjectPasswordProtection>
 		</Page>
-{:else}
+	{:else}
-	<Page>
+		<Page class="project-page">
 			<div slot="header" class="project-header">
 				{#if project.logoUrl}
-				<div class="project-logo" style="background-color: {project.backgroundColor || '#f5f5f5'}">
+					<div
+						class="project-logo"
+						style="background-color: {project.backgroundColor || '#f5f5f5'}"
+					>
 						<img src={project.logoUrl} alt="{project.title} logo" />
 					</div>
 				{/if}
@@ -76,9 +80,15 @@
 			</div>
 			<ProjectContent {project} />
 		</Page>
-{/if}
+	{/if}
+</div>
 
 <style lang="scss">
+	.project-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	/* Error and Loading States */
 	.error-header h1 {
 		color: $red-60;
@@ -116,6 +126,7 @@
 	.project-header {
 		text-align: center;
 		width: 100%;
+		padding: $unit-2x 0;
 	}
 
 	.project-logo {

src/routes/photos/+page.svelte

@@ -8,7 +8,7 @@
 	const error = $derived(data.error)
 </script>
 
-<div class="photos-page">
+<div class="photos-container">
 	{#if error}
 		<div class="error-container">
 			<div class="error-message">
@@ -29,14 +29,15 @@
 </div>
 
 <style lang="scss">
-	.photos-page {
+	.photos-container {
 		width: 100%;
-		max-width: 900px;
+		max-width: 700px;
 		margin: 0 auto;
 		padding: 0 $unit-3x;
 
 		@include breakpoint('phone') {
-			padding: $unit-3x $unit-2x;
+			padding: 0 $unit-2x;
+			box-sizing: border-box;
 		}
 	}
 

src/routes/universe/+page.svelte

@@ -24,17 +24,7 @@
 	.universe-container {
 		max-width: 784px;
 		margin: 0 auto;
-		padding: 0 $unit-5x;
+		padding: 0;
-
-		@include breakpoint('phone') {
-			margin-top: $unit-3x;
-			margin-bottom: $unit-3x;
-			padding: 0 $unit-3x;
-		}
-
-		@include breakpoint('small-phone') {
-			padding: 0 $unit-2x;
-		}
 	}
 
 	.error-message {

src/routes/universe/[slug]/+page.svelte

@@ -39,7 +39,8 @@
 	{/if}
 </svelte:head>
 
-{#if error || !post}
+<div class="universe-page-container">
+	{#if error || !post}
 		<Page>
 			<div class="error-container">
 				<div class="error-content">
@@ -52,13 +53,19 @@
 				</div>
 			</div>
 		</Page>
-{:else}
+	{:else}
 		<Page>
 			<DynamicPostContent {post} />
 		</Page>
-{/if}
+	{/if}
+</div>
 
 <style lang="scss">
+	.universe-page-container {
+		padding: 0 $unit-2x;
+		box-sizing: border-box;
+	}
+
 	.error-container {
 		display: flex;
 		justify-content: center;

src/routes/work/[slug]/+page.svelte

@@ -157,9 +157,10 @@
 		width: 100%;
 		max-width: 700px;
 		margin: 0 auto;
+		box-sizing: border-box;
 
 		@include breakpoint('phone') {
-			margin-top: $unit-3x;
+			padding: 0 $unit-2x;
 		}
 
 		:global(.page) {