diff --git a/core/css/apps.scss b/core/css/apps.scss index 358498841e..e880c2a18d 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -77,7 +77,7 @@ kbd { position: fixed; top: $header-height; left: 0; - z-index: 500; + z-index: 1000; overflow-y: auto; overflow-x: hidden; // Do not use vh because of mobile headers @@ -589,19 +589,20 @@ kbd { display: flex; // padding is included in height padding-top: $header-height; + overflow-y: auto; min-height: 100%; } /* APP-CONTENT AND WRAPPER ------------------------------------------ */ /* Part where the content will be loaded into */ #app-content { - z-index: 1000; + z-index: 500; background-color: var(--color-main-background); position: relative; - min-height: 100%; flex-basis: 100vw; + min-height: 100%; /* margin if navigation element is here */ - #app-navigation + & { + #app-navigation + & { margin-left: $navigation-width; } /* no top border for first settings item */ diff --git a/core/css/mobile.scss b/core/css/mobile.scss index 93e2909a51..13fa2eea9d 100644 --- a/core/css/mobile.scss +++ b/core/css/mobile.scss @@ -35,19 +35,16 @@ /* full width for message list on mobile */ .app-content-list { - width: 100%; background: var(--color-main-background); - position: relative; - z-index: 100; - } - - /* since list and content are only displayed full window size - * we don't ant inner scrolling - */ - #app-content-wrapper { - .app-content-list, - .app-content-detail { - max-height: unset; + flex: 1 1 100%; + + .app-content-detail { + display: none; + } + &.showdetails { + display: none; + + .app-content-detail { + display: initial; + } } } @@ -59,7 +56,7 @@ #app-navigation-toggle-back { position: fixed; display: inline-block !important; - top: 45px; + top: $header-height; left: 0; width: 44px; height: 44px; @@ -73,18 +70,11 @@ transform: translateX(-100%); } - /* end of media query */ -} - /* allow horizontal scrollbar in settings - otherwise user management is not usable on mobile */ - #body-settings #app-content { - overflow-x: auto !important; } #app-navigation-toggle { position: fixed; display: inline-block !important; - top: $header-height; left: 0; width: 44px; height: 44px; @@ -132,11 +122,6 @@ max-width: 80%; } - /* fix controls bar jumping when navigation is slid out */ - .snapjs-left #app-navigation-toggle, - .snapjs-left #controls { - top: 0; - } .snapjs-left table.multiselect thead { top: 44px; }