various layout fixes

src/lib/utils/poetry/p.svelte

@@ -1,3 +1,3 @@
-<p class="whitespace-pre">
+<p class="whitespace-pre-wrap">
 	<slot></slot>
 </p>

src/routes/(app)/+layout.svelte

@@ -6,7 +6,7 @@
 	<div class="navbar bg-base-300 sticky top-0 z-50">
 		<div class="navbar-start">
 			<div class="dropdown">
-				<div tabindex="-1" class="btn btn-ghost lg:hidden">
+				<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						class="h-5 w-5"
@@ -33,7 +33,7 @@
 					<li><a href="/services">Services</a></li>
 				</ul>
 			</div>
-			<a class="btn btn-outline btn-primary text-xl" href="/">silentsilas</a>
+			<a class="link-primary text-xl" href="/">silentsilas</a>
 		</div>
 		<div class="navbar-end hidden lg:flex">
 			<ul class="menu menu-horizontal px-1">

src/routes/(app)/poetry/+page.svelte

@@ -35,7 +35,7 @@
 	}
 </script>
 
-<div class="container mx-auto flex flex-col items-center py-10">
+<div class="container mx-auto flex flex-col items-center">
 	<div class="prose">
 		<h1 class="py-6">Poetry</h1>
 	</div>
@@ -54,7 +54,7 @@
 	</ul>
 </div>
 {#if total > 1}
-	<nav class="join justify-end">
+	<nav class="join justify-end py-10">
 		<button
 			class="join-item btn-primary btn btn-outline"
 			on:click={() => navigate(currentPage - 1)}

src/routes/(app)/poetry/[slug]/+page.svelte

@@ -5,12 +5,8 @@
 	const { title, date: _date, Content, categories: _ } = data;
 </script>
 
-<div class="container mx-auto flex flex-col items-center py-10">
-	<div class="prose">
-		<h1 class="py-6">{title}</h1>
-	</div>
-	<div class="prose">
-		<Content />
-	</div>
-	<a href="/poetry" class="link mt-10">Back to Poetry</a>
+<div class="container mx-auto flex flex-col items-center prose px-4">
+	<h1 class="py-6">{title}</h1>
+	<Content />
+	<a href="/poetry" class="link py-10">Back to Poetry</a>
 </div>