From 7169bf0fb1f2add3b84dd5fec05bbdfb9dee1375 Mon Sep 17 00:00:00 2001
From: Yuri Tatishchev <itatishch@gmail.com>
Date: Sat, 2 Nov 2024 00:34:21 -0700
Subject: [PATCH] layout improvements

---
 src/app.html                 | 2 +-
 src/routes/+layout.svelte    | 9 ++++++---
 src/routes/+page.svelte      | 4 ++++
 src/routes/user/+page.svelte | 4 ++++
 4 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/app.html b/src/app.html
index 2a7ca6b..6b8b957 100644
--- a/src/app.html
+++ b/src/app.html
@@ -7,6 +7,6 @@
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents" class="flex flex-col min-h-screen">%sveltekit.body%</div>
+		<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b4569c8..6a6b74c 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -7,8 +7,8 @@
 	const { user } = data;
 </script>
 
-<header class="p-4 md:flex">
-	<span class=" mr-6 font-bold xl:inline-block">My App</span>
+<header class="p-4 sm:flex">
+	<span class=" mr-6 font-bold sm:inline-block">My App</span>
 	<nav class="flex items-center gap-6 text-sm">
 		<a href="/" class={cn("hover:text-foreground/80 transition-colors",
 				$page.url.pathname === "/" ? "text-foreground" : "text-foreground/60")}>Home</a>
@@ -22,6 +22,9 @@
 	{@render children()}
 </main>
 
-<footer class="p-4 text-center">
+<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
+<!--Some shenanings needed to be done to get the footer position to stick correctly,
+didn't work with display: contents-->
+<footer class="p-4 relative text-center inset-x-0 bottom-0">
 	<p>&copy; 2024</p>
 </footer>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2254d93..07ba1c6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -5,6 +5,10 @@
 	const { user } = data;
 </script>
 
+<svelte:head>
+	<title>VpGen</title>
+</svelte:head>
+
 <h1>Welcome to SvelteKit</h1>
 
 {#if user }
diff --git a/src/routes/user/+page.svelte b/src/routes/user/+page.svelte
index f27be59..86b54d5 100644
--- a/src/routes/user/+page.svelte
+++ b/src/routes/user/+page.svelte
@@ -16,6 +16,10 @@
 	}
 </script>
 
+<svelte:head>
+	<title>User Profile</title>
+</svelte:head>
+
 <p>
 	{JSON.stringify(data.user)}
 </p>
