6 files changed, 19 insertions, 22 deletions
diff --git a/ui/app.css b/ui/app.css
index b5c61c9..b316dea 100644
--- a/ui/app.css
+++ b/ui/app.css
@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* This should help minimize swipe-to-go-back behaviour, enabling our
+* swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
+* Safari, when swiping from the screen edge, the OS gets th event and
+* handles it before the browser does.
+*/
+html,
+body {
+  overscroll-behavior-x: none;
+}
diff --git a/ui/lib/components/CreateChannelForm.svelte b/ui/lib/components/CreateChannelForm.svelte
index afa3f78..d50e60d 100644
--- a/ui/lib/components/CreateChannelForm.svelte
+++ b/ui/lib/components/CreateChannelForm.svelte
@@ -2,17 +2,16 @@
   import { createChannel } from '$lib/apiServer';
 
   let name = $state('');
-  let pending = false;
-  let disabled = $derived(pending);
+  let disabled = $state(false);
 
   async function handleSubmit(event) {
     event.preventDefault();
-    pending = true;
+    disabled = true;
     const response = await createChannel(name);
     if (200 <= response.status && response.status < 300) {
       name = '';
     }
-    pending = false;
+    disabled = false;
   }
 </script>
 
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index fddeecd..1663696 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -23,7 +23,7 @@
   }
 </script>
 
-<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave}>
+<div class="message relative" class:bg-warning-800={deleteArmed} {onmouseleave} role="article">
   <div class="handle chip bg-surface-700 absolute -top-6 right-0">
     {at}
     {#if editable}
diff --git a/ui/lib/components/MessageInput.svelte b/ui/lib/components/MessageInput.svelte
index 26521e1..22456f3 100644
--- a/ui/lib/components/MessageInput.svelte
+++ b/ui/lib/components/MessageInput.svelte
@@ -5,16 +5,14 @@
 
   let form;
   let value = $state('');
-  let pending = false;
-
-  let disabled = $derived(pending);
+  let disabled = $state(false);
 
   async function onSubmit(event) {
     event.preventDefault();
-    pending = true;
+    disabled = true;
     await postToChannel(channel, value);
     form.reset();
-    pending = false;
+    disabled = false;
   }
 
   function onKeyDown(event) {
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index e542f24..ad8227e 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -103,21 +103,11 @@
   /* Just some global CSS variables, don't mind them.
    */
   :root {
-    --app-bar-height: 68px;
+    --app-bar-height: 48px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
   }
 
-  /* This should help minimize swipe-to-go-back behaviour, enabling our
-   * swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS
-   * Safari, when swiping from the screen edge, the OS gets th event and
-   * handles it before the browser does.
-   */
-  html,
-  body {
-    overscroll-behavior-x: none;
-  }
-
   #interface {
     margin: unset;
     display: grid;
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 8940659..26033e0 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -24,7 +24,7 @@
   let { children } = $props();
 </script>
 
-<AppBar class="app-bar">
+<AppBar padding="px-4 pt-0 pb-4">
   <svelte:fragment slot="lead">
     <button onclick={toggleMenu} class="cursor-pointer">
       <img class="w-8 h-8" alt="logo" src={logo} />