Skip to content

Commit

Permalink
Sidebar container: Only observe main sidebar height when floating
Browse files Browse the repository at this point in the history
This avoids setting a min-height on main on smaller devices, leading to longer than necessary page lengths.

See #611
  • Loading branch information
adamwoodnz committed Dec 10, 2024
1 parent 3b3e054 commit f84d616
Showing 1 changed file with 6 additions and 3 deletions.
9 changes: 6 additions & 3 deletions mu-plugins/blocks/sidebar-container/src/view.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,16 @@ function init() {
// When the sidebar container adjacent to the main element (usually the chapter list)
// is taller than the main element, a glitch occurs when scrolling past the point where
// the sidebar becomes fixed, because the main element height depends on the sidebar container
// height. To avoid this, we observe the height of this container when it is not fixed, and
// set the min-height of the main element to match the container height.
// height. To avoid this, we observe the height of this container when it is floating and
// not fixed, and set the min-height of the main element to match the container height.
const isSibling = container.previousElementSibling === main || container.nextElementSibling === main;
if ( 'ResizeObserver' in window && isSibling ) {
const resizeObserver = new ResizeObserver( ( entries ) => {
for ( const entry of entries ) {
if ( ! container.classList.contains( 'is-fixed-sidebar' ) ) {
if (
container.classList.contains( 'is-floating-sidebar' ) &&
! container.classList.contains( 'is-fixed-sidebar' )
) {
const containerHeight = entry.contentRect.height;

if ( containerHeight ) {
Expand Down

0 comments on commit f84d616

Please sign in to comment.