Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Use dvh for sidebar height (#21278) 

This will automatically adjust when browser UI is shown/hidden (e.g. when scrolling up/down on mobile Safari).

Similar approach to c82094cd9d, which targeted the 'slide-in' version of menus.
This commit is contained in:
David Taylor 2023-04-27 16:31:09 +01:00 committed by GitHub
parent c4c2da83b4
commit f5fa1ef771
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/stylesheets/common/base/sidebar.scss
View File

@ -31,13 +31,21 @@
@include unselectable; @include unselectable;
// 100dvh with fallback for old browsers
--100dvh: 100vh;
@supports (height: 100dvh) {
--100dvh: 100dvh;
}
height: calc(var(--100dvh) - var(--header-offset, 0px));
.footer-nav-ipad & { .footer-nav-ipad & {
top: calc(var(--header-offset) + var(--footer-nav-height)); top: calc(var(--header-offset) + var(--footer-nav-height));
height: calc( height: calc(
100vh - var(--header-offset, 0px) - var(--footer-nav-height, 0px) var(--100dvh) - var(--header-offset, 0px) - var(--footer-nav-height, 0px)
); );
} }
height: calc(100vh - var(--header-offset, 0px));
align-self: start; align-self: start;
overflow-y: auto; overflow-y: auto;