1
0
mirror of https://github.com/jhillyerd/inbucket.git synced 2025-12-18 18:17:03 +00:00

ui: Make message & list scroll within viewport

This commit is contained in:
James Hillyerd
2018-11-25 21:19:28 -08:00
parent 6a95dfe5c6
commit 7a16f64ff0
2 changed files with 42 additions and 37 deletions

View File

@@ -115,6 +115,7 @@ header {
.page {
grid-area: page;
min-height: 0; /* Allows scrolling in nested flex/grids. */
}
footer {
@@ -284,28 +285,34 @@ li.navbar-active span,
.mailbox {
display: grid;
grid-area: page;
grid-gap: 20px;
grid-template-areas:
"list mesg";
grid-template-columns:
minmax(200px, 300px)
minmax(650px, 1000px);
grid-template-rows: 1fr;
grid-gap: 1px 20px;
grid:
"ctrl mesg" auto
"list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
}
@media (max-width: 999px) {
.mailbox {
grid-template-areas:
"list"
"mesg";
grid-template-columns: none;
grid-template-rows: none;
justify-self: center;
}
.message-list-controls {
grid-area: ctrl;
}
.message-list {
grid-area: list;
overflow-y: scroll;
}
@media (max-width: 999px) {
.mailbox {
grid:
"ctrl" auto
"list" auto
"mesg" auto / 1fr;
justify-self: center;
width: 100%;
}
.message-list {
overflow-y: visible;
}
}
.message-list-entry {
@@ -343,6 +350,7 @@ li.navbar-active span,
.message {
grid-area: mesg;
overflow: auto;
}
.message-header {