2 files changed, 33 insertions, 5 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index ad8227e..7d3a9eb 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -75,8 +75,20 @@
       gesture.destroy();
     }
   });
+
+  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>
@@ -106,6 +118,7 @@
     --app-bar-height: 48px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
+    --nav-width: 21rem;
   }
 
   #interface {
@@ -128,18 +141,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>