From 27fe4bf3e55891b131078e2161c37d37fe833395 Mon Sep 17 00:00:00 2001
From: Eggrror404 <94736451+Eggrror404@users.noreply.github.com>
Date: Sun, 5 Nov 2023 20:16:58 +0800
Subject: [PATCH] fix post buttons/actions overlapping

made it into the title instead of absolute positioning
---
 src/lib/components/PageTitle.svelte         |  5 +++-
 src/lib/components/actions.ts               |  2 ++
 src/routes/post/[...post]/+page.svelte      | 28 ++++++++++-----------
 src/routes/post/[...post]/edit/+page.svelte | 22 ++++++++--------
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/PageTitle.svelte b/src/lib/components/PageTitle.svelte
index 19e2f7e..708a129 100644
--- a/src/lib/components/PageTitle.svelte
+++ b/src/lib/components/PageTitle.svelte
@@ -32,7 +32,10 @@
       </span>
     {/each}
   </span>
-  <h1 class="text-3xl font-bold">{title}</h1>
+  <div class="flex items-center justify-between">
+    <h1 class="text-3xl font-bold">{title}</h1>
+    <slot name="title" />
+  </div>
 
   <slot />
 </header>
diff --git a/src/lib/components/actions.ts b/src/lib/components/actions.ts
index 42c671f..33d48b3 100644
--- a/src/lib/components/actions.ts
+++ b/src/lib/components/actions.ts
@@ -1,5 +1,7 @@
 import type { Action } from "svelte/action";
 
+// TODO: smooth scroll with <a />
+
 export const withIcon: Action = (node) => {
   // NOTE: may need tailwind-merge
   node.classList.add("flex", "items-center", "gap-2");
diff --git a/src/routes/post/[...post]/+page.svelte b/src/routes/post/[...post]/+page.svelte
index abe7f2f..1b33ba2 100644
--- a/src/routes/post/[...post]/+page.svelte
+++ b/src/routes/post/[...post]/+page.svelte
@@ -69,21 +69,21 @@
           {localeDate}
         </span>
       </div>
-    </PageTitle>
 
-    <div class="absolute right-4 top-10 flex gap-2">
-      <button class="btn-text flex items-center gap-2 md:hidden" use:melt={$trigger}>
-        <!-- NOTE: cannot use withIcon because of melt -->
-        <List class="h-4 w-4" />
-        <span>Contents</span>
-      </button>
-      {#if data.session?.user?.role === "admin"}
-        <a class="btn-accent" href="{base}/post/{url}/edit" use:withIcon>
-          <Pencil class="h-4 w-4" />
-          <span>Edit</span>
-        </a>
-      {/if}
-    </div>
+      <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
+        <button class="btn-text flex items-center gap-2 md:hidden" use:melt={$trigger}>
+          <!-- NOTE: cannot use withIcon because of melt -->
+          <List class="h-4 w-4" />
+          <span>Contents</span>
+        </button>
+        {#if data.session?.user?.role === "admin"}
+          <a class="btn-accent" href="{base}/post/{url}/edit" use:withIcon>
+            <Pencil class="h-4 w-4" />
+            <span>Edit</span>
+          </a>
+        {/if}
+      </div>
+    </PageTitle>
 
     <div use:melt={$portalled}>
       {#if $open}
diff --git a/src/routes/post/[...post]/edit/+page.svelte b/src/routes/post/[...post]/edit/+page.svelte
index 82fb48a..8ba6ac5 100644
--- a/src/routes/post/[...post]/edit/+page.svelte
+++ b/src/routes/post/[...post]/edit/+page.svelte
@@ -82,18 +82,18 @@
           {localeDate}
         </span>
       </div>
-    </PageTitle>
 
-    <div class="absolute right-4 top-10 flex gap-2">
-      <button class="btn-accent" use:withIcon on:click={savePost}>
-        <Save class="h-4 w-4" />
-        Save
-      </button>
-      <button class="btn-text" use:withIcon on:click={deletePost}>
-        <Alert class="h-4 w-4" />
-        Delete
-      </button>
-    </div>
+      <div slot="title" class="flex flex-grow basis-0 flex-wrap justify-end gap-2">
+        <button class="btn-accent" use:withIcon on:click={savePost}>
+          <Save class="h-4 w-4" />
+          Save
+        </button>
+        <button class="btn-text" use:withIcon on:click={deletePost}>
+          <Alert class="h-4 w-4" />
+          Delete
+        </button>
+      </div>
+    </PageTitle>
 
     <div use:melt={$portalled}>
       {#if $open}