Calculate layout height more betterly

2 files changed, 16 insertions, 11 deletions

diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte
index b63a607..c337b3f 100644
--- a/ui/routes/(app)/+layout.svelte
+++ b/ui/routes/(app)/+layout.svelte
@@ -66,7 +66,7 @@
 {#if loading}
     <h2>Loading&hellip;</h2>
 {:else}
-    <div id="interface" class="h-full pt-20 p-2">
+    <div id="interface" class="p-2">
         <main>
             <div class="active-channel border border-solid border-gray-400 rounded-[1.25rem]">
                 <slot />
@@ -89,9 +89,14 @@
 {/if}
 
 <style>
+:root {
+    --app-bar-height: 5rem;
+    --input-row-height: 2rem;
+}
+
 #interface {
   margin: unset;
-  min-block-size: 100%;
+  /* min-block-size: 100%;*/
   display: grid;
   grid-template: 
     'side main' 1fr
@@ -107,11 +112,11 @@
 nav {
     grid-area: side;
     background-color: rgb(var(--color-surface-600));
-    inset: 0 auto 0 0;
+    inset: auto auto 0 0;
     padding: 0.25rem;
     position: var(--overlay, absolute);
     transition: translate 300ms ease-out;
-    height: 100vh;
+    height: calc(100vh - var(--app-bar-height));
     width: 21rem;
 }
 nav button {
@@ -119,18 +124,18 @@ nav button {
     top: 0;
     right: 0;
 }
+main {
+    grid-area: main;
+    height: calc(100vh - var(--app-bar-height));
+}
 .active-channel {
-    height: 87vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
 .channel-list {
-    height: 94vh;
+    height: calc(100vh - var(--app-bar-height) - var(--input-row-height));
     overflow: scroll;
 }
-main {
-    grid-area: main;
-    max-height: 88vh;  /* How do we ensure that this is 100vh - header size? */
-}
 nav[data-expanded=false] {
   translate: var(--translate, -100% 0);
 }
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index 6e6a8d6..b7ed746 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -15,7 +15,7 @@
 
 <div id="app" class="m-0 p-0 h-vh w-full">
     <div class="w-full">
-        <AppBar>
+        <AppBar class="app-bar">
             <svelte:fragment slot="lead">
                 <a on:click|preventDefault={toggleMenu} class="cursor-pointer">
                 <img class="w-8 h-8" alt="logo" src={logo} />