fix layout

dist/index.js

@@ -704,6 +704,7 @@
   }
   function selectChat(chat) {
     selectedChat.value = chat;
+    document.getElementById("message-tab")?.scrollIntoView();
   }
   chatIds.value.forEach((id) => chats.add(new Chat(id)));
   if (serverAddressInput.value != "" && didRequestConnection.value == true) {
@@ -842,7 +843,7 @@
         placeholder: translation.encryptionKeyPlaceholder,
         "bind:value": chat.encryptionKey
       }
-    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    ))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("button", { class: "danger", "on:click": deleteChat }, translation.removeChat, /* @__PURE__ */ createElement("span", { class: "icon" }, "delete"))), /* @__PURE__ */ createElement("button", { "on:click": closeModal }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/Views/messageComposer.tsx
@@ -917,7 +918,7 @@
       function hideOptions() {
         isShowingOptions.value = false;
       }
-      return /* @__PURE__ */ createElement("article", { id: "message-tab" }, /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
+      return /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("header", { class: "padding-0" }, /* @__PURE__ */ createElement("span", { class: "flex-row align-center" }, /* @__PURE__ */ createElement("button", { "aria-label": translation.back, "on:click": closeChatView }, /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")), /* @__PURE__ */ createElement("span", { "subscribe:innerText": chat.primaryChannel })), /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
         "button",
         {
           "aria-label": translation.showChatOptions,
@@ -926,7 +927,7 @@
         /* @__PURE__ */ createElement("span", { class: "icon" }, "tune")
       ))), ThreadView(chat), /* @__PURE__ */ createElement("footer", null, MessageComposer(chat)), ChatOptionModal(chat, isShowingOptions));
     });
-    return /* @__PURE__ */ createElement("div", { "children:set": messageTabContent });
+    return /* @__PURE__ */ createElement("article", { id: "message-tab", "children:set": messageTabContent });
   }
 
   // src/Views/chatListSection.tsx

src/Model/model.ts

@@ -147,6 +147,7 @@ export function closeChatView() {
 
 export function selectChat(chat: Chat) {
   selectedChat.value = chat;
+  document.getElementById("message-tab")?.scrollIntoView();
 }
 
 chatIds.value.forEach((id) => chats.add(new Chat(id)));

src/Tabs/messageTab.tsx

@@ -27,7 +27,7 @@ export function MessageTab() {
     }
 
     return (
-      <article id="message-tab">
+      <div>
         <header class="padding-0">
           <span class="flex-row align-center">
             <button aria-label={translation.back} on:click={closeChatView}>
@@ -45,13 +45,15 @@ export function MessageTab() {
             </button>
           </span>
         </header>
+
         {ThreadView(chat)}
+        
         <footer>{MessageComposer(chat)}</footer>
 
         {ChatOptionModal(chat, isShowingOptions)}
-      </article>
+      </div>
     );
   });
 
-  return <div children:set={messageTabContent}></div>;
+  return <article id="message-tab" children:set={messageTabContent}></article>;
 }