From baac66327eb7bd6cc0afc967d65db8e577ad3dc0 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Fri, 3 Mar 2023 16:46:13 +0100
Subject: [PATCH] Better aligning

---
 src/lib/Chat.svelte | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index b03acda..303466c 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -106,14 +106,24 @@
   };
 </script>
 
-<button
-  class="button is-warning is-pulled-right"
-  on:click={() => {
-    clearMessages(chatId);
-  }}><span class="greyscale mr-2">🗑️</span> Clear messages</button
->
+<nav class="level is-mobile">
+  <div class="level-left">
+    <div class="level-item">
+      <p class="subtitle is-5">Chat {chatId}</p>
+    </div>
+  </div>
 
-<p class="subtitle">Chat {chatId}</p>
+  <div class="level-right">
+    <p class="level-item">
+      <button
+        class="button is-warning"
+        on:click={() => {
+          clearMessages(chatId);
+        }}><span class="greyscale mr-2">🗑️</span> Clear messages</button
+      >
+    </p>
+  </div>
+</nav>
 
 {#each chat.messages as message}
   {#if message.role === "user"}