diff options
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 9fcdf41..c57b747 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -96,6 +96,7 @@ :root { --app-bar-height: 68px; --input-row-height: 2rem; + --interface-padding: 16px; } #interface { @@ -105,6 +106,7 @@ 'side main' 1fr / auto 1fr ; + height: calc(100vh - var(--app-bar-height)); @media (width > 640px) { --overlay: static; @@ -118,8 +120,8 @@ nav { padding: 0.25rem; position: var(--overlay, absolute); transition: translate 300ms ease-out; - height: calc(100vh - var(--app-bar-height)); width: 21rem; + height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); } nav button { position: absolute; @@ -128,14 +130,14 @@ nav button { } main { grid-area: main; - height: calc(100vh - var(--app-bar-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding)); } .active-channel { - height: calc(100vh - var(--app-bar-height) - var(--input-row-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); overflow: scroll; } .channel-list { - height: calc(100vh - var(--app-bar-height) - var(--input-row-height)); + height: calc(100vh - var(--app-bar-height) - var(--interface-padding) - var(--input-row-height)); overflow: scroll; } nav[data-expanded=false] { |