[Panel] Layout - Content Height Breaks Page-Flow

[crisgraphics]

Describe the bug
I'm not sure if this is intended, but the content breaks the page flow, if it's larger than the viewport height (s. dimensions in the screenshots). I also find it looking weird, that the scrollbar sits below the header.

To Reproduce
Steps to reproduce the behavior:

1. Create a panel page that's larger than the viewport.
2. Open Developer Tools and compare html / body height with ". k-page-view" height.

Expected behavior
The main element should not break the page flow

Screenshots

Kirby Version
3.3.5

Desktop (please complete the following information):

• Browser: Chrome v80 (Mac & Win), Edge v18 (Win)

Additional context
Here's a possible change which would keep the content in flow and sets the scrollbar to scroll (like in the startekit sample) to prevent page jumps if the content gets shorter than the viewport height.

html {
    overflow-y: scroll;
    overflow-x: hidden;
}

body, html {
    color: #16171a;
    /* overflow: hidden; */
    /* height: 100%; */
    min-height: 100%;
}

.k-panel {
    /* position: absolute; */
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #efefef;
}

.k-panel-header {
    /* position: absolute; */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
}

.k-panel[data-topbar] .k-panel-view {
    /* top: 2.5rem; */
    margin-top: 2.5rem;
}

.k-panel-view {
    /* position: absolute; */
    /* top: 0;*/
    /* right: 0;*/
    /* bottom: 0;*/
    /* left: 0;*/
    min-height: calc(100vh - 2.5rem);
    padding-bottom: 6rem;
    /* overflow-y: scroll; */
    transform: translateZ(0);
}

Best,

Cris

[bastianallgeier]

✅