From a547bf3506b822d5ff4c1f1c6c4a15c63dd2d90e Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 11 Nov 2024 22:57:35 -0500
Subject: Style sidebar and message input

---
 ui/routes/(app)/+layout.svelte | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'ui/routes/(app)/+layout.svelte')

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index 7e2c0e0..5ed3906 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -94,6 +94,7 @@
     --app-bar-height: 68px;
     --input-row-height: 2rem;
     --interface-padding: 16px;
+    --nav-width: 21rem;
   }
 
   #interface {
@@ -116,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'] {
-- 
cgit v1.2.3

