tab pane styles/handling mobile/portrait, smaller changes

* tab pane in portrait mode now covers the entire viewport
* tab pane X turned into a chevron
* added divider between tab pane header and content
* changed default tab pane state to open
* added code to scroll messages back to bottom after tab pane animation
  and message input resize

ChatTwo/Http/Frontend/src/components/DynamicTextArea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {onMount} from "svelte";
-    import {subscribe} from "$lib/utils.svelte";
-    import {chatInput} from "$lib/shared.svelte";
+    import { onMount } from "svelte";
+    import { subscribe } from "$lib/utils.svelte";
+    import { chatInput, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
 
     let textarea: HTMLTextAreaElement;
 
@@ -53,8 +53,11 @@
         if (!textarea)
             return;
 
+        const scrolledToBottom = messagesList.scrolledToBottom;
         textarea.style.height = '1px';
         textarea.style.height = `${textarea.scrollHeight + 10}px`; // with +10px extra padding
+        if (scrolledToBottom)
+            scrollMessagesToBottom();
     }
 
     $effect(() => {
@@ -97,4 +100,4 @@
         min-height: 2.5em;
         line-height: 1.25;
     }
-</style>
+</style>

ChatTwo/Http/Frontend/src/components/TabPane.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { selectedTab, knownTabs, tabPaneState, closeTabPane } from "$lib/shared.svelte";
+    import { selectedTab, knownTabs, tabPaneState, tabPaneAnimationState, closeTabPane, messagesList, scrollMessagesToBottom } from "$lib/shared.svelte";
 
     async function selectTab(index: number) {
         const rawResponse = await fetch('/tab', {
@@ -13,18 +13,41 @@
         // const content = await rawResponse.json();
         // TODO: use the response
     }
+
+    function handleClose() {
+        tabPaneAnimationState.noAnimation = false;
+        closeTabPane();
+    }
+
+    let scrolledToBottom = true;
+    function ontransitionstart() {
+        scrolledToBottom = messagesList.scrolledToBottom;
+    }
+
+    function ontransitionend() {
+        if (scrolledToBottom)
+            scrollMessagesToBottom();
+    }
 </script>
 
-<aside id="tabs" class:visible={tabPaneState.visible}>
+<aside
+    id="tabs"
+    class:no-animation={tabPaneAnimationState.noAnimation}
+    class:hidden={!tabPaneState.visible}
+    {ontransitionstart}
+    {ontransitionend}
+>
     <div class="inner">
         <header>
             <span>Tabs</span>
-            <button type="button" onclick={() => closeTabPane()}>
-                <!-- "x" icon from https://github.com/feathericons/feather, under MIT license -->
-                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+            <button type="button" onclick={() => handleClose()}>
+                <!-- "chevron-left" icon from https://github.com/feathericons/feather, under MIT license -->
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
             </button>
         </header>
 
+        <hr>
+
         <ol id="tabs-list">
             {#each knownTabs as tab}
                 <li class:active={selectedTab.index == tab.index}>

ChatTwo/Http/Frontend/src/components/TabPaneOpener.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { tabPaneState, openTabPane } from "$lib/shared.svelte";
+    import { tabPaneState, tabPaneAnimationState, openTabPane } from "$lib/shared.svelte";
 
     function onclick() {
+        tabPaneAnimationState.noAnimation = false;
         openTabPane();
     }
 </script>