diff --git a/public/assets/css/styles.css b/public/assets/css/styles.css index 4b7bc7c..69fb2c5 100644 --- a/public/assets/css/styles.css +++ b/public/assets/css/styles.css @@ -220,7 +220,8 @@ h1 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; - align-items: start; + align-items: stretch; + min-height: 0; } .control-panel, @@ -337,6 +338,7 @@ body.light .status-line { display: grid; gap: 16px; min-width: 0; + min-height: 0; } .status-line { @@ -644,7 +646,57 @@ pre { display: none !important; } +@media (min-width: 1121px) { + body { + overflow: hidden; + } + + .app-shell { + display: grid; + grid-template-rows: auto minmax(0, 1fr); + gap: 16px; + height: 100vh; + min-height: 0; + } + + .topbar { + margin-bottom: 0; + } + + .layout { + overflow: hidden; + } + + .control-panel, + .content { + height: 100%; + overflow-y: auto; + overscroll-behavior: contain; + scrollbar-gutter: stable; + scrollbar-width: thin; + } + + .control-panel { + position: static; + align-self: stretch; + } + + .content { + padding-right: 4px; + } +} + @media (max-width: 1120px) { + body { + overflow: auto; + } + + .app-shell { + display: block; + height: auto; + min-height: 100vh; + } + .topbar { grid-template-columns: 1fr; }