Style sidebar and message input

2 files changed, 21 insertions, 5 deletions

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'] {
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>