settings: Fix height of left sidebar for short screens.

It was not possible to scroll to the bottom of the list on
narrow-width when only single column was displayed on the
settings overlay. This commit fixes the height of the sidebar
and set to "100% - height of header - height of tab-container"
which fixes the scroll behavior.

This is not a issue for two-column overlay where height is set
to "100% - height of header" (the tab-container is already
inside the header).

This duplicates some CSS to avoid using "!important". While doing
this duplication, we remove "margin: 0" and "display: block" since
these are already set as default values.

Fixes #22876.
This commit is contained in:
Sahil Batra 2022-10-14 20:28:16 +05:30 committed by Tim Abbott
parent 84aeb3a59a
commit cebf43903c
2 changed files with 6 additions and 1 deletions

View File

@ -1797,6 +1797,12 @@ $option_title_width: 180px;
}
.sidebar {
position: absolute;
width: 100%;
border: none;
/* 48px is the height of settings header and 45px is the height of tab-container */
height: calc(100% - 93px);
li.active {
/* Don't highlight the active section in the settings list. */
background: inherit;

View File

@ -1079,7 +1079,6 @@ h4.user_group_setting_subsection_title {
#groups_overlay .right,
#subscription_overlay .left,
#subscription_overlay .right,
#settings_page .left,
#settings_page .content-wrapper.right {
position: absolute;
display: block;