4 files changed, 58 insertions, 7 deletions
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 0c8eeec..d77c29a 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -59,4 +59,13 @@
     content: '.';
     visibility: hidden;
   }
+  /* Without the global selector, the Svelte CSS compiler will see this as
+   * unused, and purge it from the output. However, this is "plausibly used"
+   * because it may occur in renderedBody.
+   */
+  :global(.message-body blockquote) {
+    border-left: 0.25rem solid lightgrey;
+    margin-left: 0.5rem;
+    padding-left: 0.5rem;
+  }
 </style>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 83a82a9..581682e 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -16,7 +16,21 @@
   <span class="chip variant-soft sticky top-o left-0">
     @{name}:
   </span>
-  {#each messages as { id, at, body }}
-    <Message {id} {at} {body} editable={ownMessage} />
+  {#each messages as message}
+    <Message {...message} editable={ownMessage} />
   {/each}
 </div>
+
+<style>
+  .own-message {
+    background-color: rgb(32, 42, 74);
+  }
+  /* Honestly, I don't love scoping styles per component, and this is a great
+   * example of why. MessageRuns know if they're own-message, but Messages in
+   * them need to get a style based on that fact. I don't wanna bucket-brigade
+   * that fact into the Message, when it's a pure CSS concern.
+   */
+  .own-message :global(*) {
+    color: rgb(198, 198, 198);
+  }
+</style>
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 86bc330..5ed3906 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -53,8 +53,20 @@
       events.close();
     }
   });
+
+  function beforeUnload(evt) {
+    evt.preventDefault();
+    if (events !== null) {
+      events.close();
+    }
+    // For some compat reasons?
+    evt.returnValue = '';
+    return '';
+  }
 </script>
 
+<svelte:window on:beforeunload={beforeUnload}/>
+
 <svelte:head>
   <title>pilcrow</title>
 </svelte:head>
@@ -82,6 +94,7 @@
     --app-bar-height: 68px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
+    --nav-width: 21rem;
   }
 
   #interface {
@@ -104,18 +117,24 @@
     padding: 0.25rem;
     position: var(--overlay, absolute);
     transition: translate 300ms ease-out;
-    width: 21rem;
-    height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+    width: var(--nav-width);
+    height: 100vh;
+    @media (width > 640px) {
+      height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
+    }
     z-index: 10;
+    border-top-right-radius: 1.4rem;
+    border-bottom-right-radius: 1.4rem;
   }
   main {
     grid-area: main;
     height: calc(100vh - var(--app-bar-height) - var(--interface-padding));
   }
   .channel-list {
-    height: calc(
-      100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)
-    );
+    height: calc(100vh - var(--input-row-height));
+    @media (width > 640px) {
+      height: calc(100vh - var(--app-bar-height) - var(--input-row-height) - var(--interface-padding));
+    }
     overflow: auto;
   }
   nav[data-expanded='false'] {
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index 0961665..6348e5c 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -22,4 +22,13 @@
     );
     overflow: auto;
   }
+  .create-message {
+    position: fixed;
+    bottom: 0.5rem;
+    width: calc(100% - var(--nav-width) - 2rem);
+    @media (width <= 640px) {
+      width: 100%;
+      left: 0;
+    }
+  }
 </style>