diff --git a/src/App.scss b/src/App.scss index dd3d8cbb..0deac2b1 100644 --- a/src/App.scss +++ b/src/App.scss @@ -116,7 +116,7 @@ nav { #content { overscroll-behavior-y: none; - overflow-y: auto; + overflow-y: scroll; overflow-x: hidden; position: sticky; } @@ -198,19 +198,23 @@ nav { margin-left: -2em; padding-left: 2.5em; - &:not(.-show-scrollbar) { - scrollbar-width: none; - margin-right: -2em; - padding-right: 2.5em; + // Only show custom scrollbars on devices which + // have a cursor/pointer to operate them + @media (pointer: fine) { + &:not(.-show-scrollbar) { + scrollbar-width: none; + margin-right: -2em; + padding-right: 2.5em; - &::-webkit-scrollbar { - display: block; - width: 0; + &::-webkit-scrollbar { + display: block; + width: 0; + } } - } - .panel-heading.-sticky { - top: -10px; + .panel-heading.-sticky { + top: -10px; + } } } } diff --git a/src/App.vue b/src/App.vue index 243a3314..b5f6e7d3 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,8 +41,8 @@ <router-view /> </div> <div id="notifs-column" class="column -scrollable" :class="{ '-show-scrollbar': showScrollbars }"/> - <media-modal /> </div> + <media-modal /> <shout-panel v-if="currentUser && shout && !hideShoutbox" :floating="true" diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss index 51bb3ea6..85e9f59d 100644 --- a/src/components/chat/chat.scss +++ b/src/components/chat/chat.scss @@ -133,18 +133,9 @@ .chat-view-heading { box-sizing: border-box; position: static; - z-index: 9999; top: 0; margin-top: 0; border-radius: 0; - - /* This practically overlays the panel heading color over panel background - * color. This is needed because we allow transparent panel background and - * it doesn't work well in this "disjointed panel header" case - */ - background: - linear-gradient(to top, var(--panel), var(--panel)), - linear-gradient(to top, var(--bg), var(--bg)); height: 50px; } diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 708a43c6..c7dcd007 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -121,7 +121,7 @@ $modal-view-button-icon-width: 3em; $modal-view-button-icon-margin: 0.5em; .modal-view.media-modal-view { - z-index: 1001; + z-index: 9000; flex-direction: column; .modal-view-button-arrow, diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index 2b58913f..9394efff 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -35,7 +35,7 @@ export default { <style lang="scss"> .modal-view { - z-index: 1000; + z-index: 2000; position: fixed; top: 0; left: 0;