Table sticky header appears when table not in viewport

Problem/Motivation

The sticky table header is triggered whenever the header is out of the viewport, even if the header is below the bottom of the viewport. In other words, when the table is out of view (at the bottom of the page), the sticky header will show on top of the page, covering some necessary contents.

Steps to reproduce

Just go to any admin interface with a sticky table near the lower half of the page. View pages with a preview table on the bottom is a good choice. The sticky table header will show when the page is loaded. Start scrolling, and the sticky header will disappear when the actual table header comes into the viewport. Then when the table is scrolled up enough to hide the header, the sticky header will show again as expected.

Proposed resolution

The trigger is the IntersectionObserver in tableheader.js (themes/contrib/gin/js/overrides/tableheader.js)

the statement on line 16

if (!e.isIntersecting && e.rootBounds.top === stickyOffsetTop)

is checking rootBounds.top with the stickyOffsetTop. However, since the sticky table header is inside of the real table, and it's positioned absolutely on top of the page at the stickyOffsetTop location, the test e.rootBounds.top === stickyOffsetTop will always be TRUE.

Instead, it should be using e.intersectionRect.top === stickyOffsetTop so it's checking the top of the table position rather than its parent.

Original code

              if (!e.isIntersecting && e.rootBounds.top === stickyOffsetTop) {
                context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');
              } else {
                context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');
              }

New code

              if (!e.isIntersecting && e.intersectionRect.top === stickyOffsetTop) {
                context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');
              } else {
                context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');
              }

Remaining tasks

Someone please test this and see if I should generate a patch.