diff options
Diffstat (limited to 'ui/routes/(app)')
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 25 |
1 files changed, 15 insertions, 10 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…</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); } |