Nail responsive behavior

Author: maiertech

package.json

@@ -22,7 +22,7 @@
 		"@fontsource/roboto": "^5.2.10",
 		"@fontsource/spectral": "^5.2.8",
 		"@lucide/svelte": "^1.7.0",
-		"@maiertech/sveltekit-helpers": "^0.48.0",
+		"@maiertech/sveltekit-helpers": "^0.48.1",
 		"@playwright/test": "^1.58.2",
 		"@stackblitz/sdk": "^1.11.0",
 		"@sveltejs/adapter-node": "^5.5.4",

pnpm-lock.yaml

@@ -14,6 +14,6 @@ export const load: PageServerLoad = async function () {
 		},
 		posts: posts.slice(0, 6),
 		notes: notes.slice(0, 7),
-		videos: videos.slice(0, 2)
+		videos: videos.slice(0, 3)
 	};
 };

src/routes/+page.server.ts

@@ -9,21 +9,27 @@
 
 <p class="mb-12 max-w-[45ch] text-xl lg:text-2xl">{data.seo.description}</p>
 
-<div class="flex flex-wrap gap-8">
-	<!-- not-sidebar -->
-	<div class="@container grow-999 min-inline-3/5">
-		<div class="mb-8 flex flex-wrap gap-8">
-			<!-- Latest video (not-sidebar) -->
-
+<div class="flex flex-wrap gap-6">
+	<div
+		// Not-sidebar (outer): videos & posts.
+		class="@container grow-999 min-inline-3/5"
+	>
+		<div class="mb-8 flex flex-wrap gap-6">
 			<h2 class="sr-only">Videos</h2>
 
-			<div class="grow-999 min-inline-3/5">
-				<VideoPreview value={data.videos[0]} />
-			</div>
-
-			<!-- Second video (sidebar) -->
-			<div class="grow basis-3xs">
-				<VideoPreview value={data.videos[1]} class="h-full" />
+			<VideoPreview
+				// Not-sidebar (videos): latest video.
+				value={data.videos[0]}
+				class="grow-999 min-inline-3/5"
+			/>
+
+			<div
+				// Sidebar (videos): 2 more videos.
+				class="flex grow basis-3xs flex-wrap gap-6"
+			>
+				{#each data.videos.slice(1) as video (video.id)}
+					<VideoPreview value={video} showDescription={false} class="grow basis-80" />
+				{/each}
 			</div>
 		</div>
 
@@ -36,9 +42,10 @@
 		</div>
 	</div>
 
-	<!-- sidebar -->
-
-	<div class="@container grow basis-2xs">
+	<div
+		// Sidebar (outer): notes.
+		class="@container grow basis-2xs"
+	>
 		<h2 class="sr-only">Notes</h2>
 		<div class="grid grid-cols-1 gap-6 @lg:grid-cols-2 @4xl:grid-cols-3">
 			{#each data.notes as note (note.path)}