improve message bar appearance on small viewports

frontend/public/global.css

@@ -36,6 +36,7 @@
 	--space-unit: 1em;
 	--space-xxs: calc(0.25 * var(--space-unit));
 	--space-xs: calc(0.5 * var(--space-unit));
+	--space-xsplus: calc(0.65 * var(--space-unit));
 	--space-sm: calc(0.75 * var(--space-unit));
 	--space-norm: var(--space-unit);
 	--space-normplus: calc(var(--space-unit) + var(--space-sm));

frontend/src/components/MessageInput.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { SendIcon } from "svelte-feather-icons";
+    import { ArrowUpIcon, SendIcon } from "svelte-feather-icons";
     import request from "../request";
     import { apiRoute } from "../storage";
     import { messagesStoreProvider, overlayStore, smallViewport, typingStore, userInfoStore } from "../stores";
@@ -101,6 +101,16 @@
         padding: var(--space-norm);
         padding-bottom: 0;
     }
+    
+    .message-input-container.small {
+        padding-top: var(--space-sm);
+    }
+    
+    .message-input.small {
+        padding: var(--space-xsplus);
+        padding-left: var(--space-sm);
+        border-radius: 1.4em;
+    }
 
     .message-input {
         width: 100%;
@@ -120,6 +130,10 @@
 
     .send-button {
         margin-left: var(--space-sm);
+        border-radius: 50%;
+        background-color: var(--purple-1);
+        aspect-ratio: 1 / 1;
+        flex-shrink: 0;
     }
 
     .invisible {
@@ -148,7 +162,7 @@
     }
 </style>
 
-<div class="message-input-container">
+<div class="message-input-container" class:small={ $smallViewport }>
     <div class="inner-input-container">
         <textarea
             placeholder={$smallViewport ? `Message #${channel.name}` : `Send something interesting to #${channel.name}`}
@@ -159,10 +173,11 @@
             on:input={ onInput }
             bind:value={ messageInput }
             bind:this={ messageTextarea }
+            class:small={ $smallViewport }
         />
         {#if $smallViewport}
             <button class="icon-button send-button" on:click="{ sendMessage }">
-                <SendIcon />
+                <ArrowUpIcon />
             </button>
         {/if}
     </div>