Correct sidebar styling on details pages (#6377)

* Remove margin-bottom on xs to fix styling weirdness
* Only set sidebar height when sidebar visible
This commit is contained in:
WithoutPants 2025-12-05 09:04:16 +11:00 committed by GitHub
parent d994df2900
commit 88a149c085
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -828,7 +828,6 @@ button.btn.favorite-button {
}
@include media-breakpoint-down(xs) {
.sidebar {
margin-bottom: $navbar-height;
margin-top: 0;
}
}
@ -920,12 +919,16 @@ $sticky-header-height: calc(50px + 3.3rem);
}
.detail-body {
.sidebar-pane {
position: sticky;
top: calc($sticky-detail-header-height + $navbar-height);
}
.sidebar {
// required for sticky to work
align-self: flex-start;
// take a further 15px padding to match the detail body
height: calc(100vh - $sticky-header-height - 15px);
margin-top: -15px;
max-height: calc(100vh - $sticky-header-height - 15px);
overflow-y: auto;
@ -939,6 +942,10 @@ $sticky-header-height: calc(50px + 3.3rem);
}
}
.sidebar-pane:not(.hide-sidebar) .sidebar {
height: calc(100vh - $sticky-header-height - 15px);
}
.sidebar-pane.hide-sidebar .sidebar {
left: -$sidebar-width;
margin-left: calc(-15px - $sidebar-width);
@ -955,6 +962,10 @@ $sticky-header-height: calc(50px + 3.3rem);
}
}
@include media-breakpoint-down(xs) {
.sidebar-pane {
top: 0;
}
.sidebar {
// flex: 100% 0 0;
height: calc(100vh - $navbar-height);