1 files changed, 24 insertions, 5 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 81324fd..a82d302 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -104,8 +104,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>
   <!-- TODO: unread count? -->
   <title>pilcrow</title>
@@ -136,6 +148,7 @@
     --app-bar-height: 48px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
+    --nav-width: 21rem;
   }
 
   #interface {
@@ -158,18 +171,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'] {