Switching Help tabs shifts the page content below the panel

[Latz]

When the Help panel at the top of an admin screen is opened and its tabs are clicked through, a different amount of content is shown by each tab, so the Help panel is resized to match and because the panel is made shorter or taller depending on which tab is open, everything below it on the page is shifted up or down every time a tab is switched.

Instead of the visible tab's content being swapped in and out of the page, a CSS grid is used to stack all tab panels on top of each other in the same cell, with only the currently active one being made visible. Because all tabs are placed in that same grid cell, the panel's size is determined by the largest tab up front and is kept fixed from then on — so the panel's height is no longer changed when tabs are switched, and the page below it is not moved.

One trade-off: the panel's height is now fixed to whichever tab has the most content on that screen, rather than to the one currently being viewed. So some empty space may be seen under a short tab if another tab on the same screen is much longer — a reasonable price considered acceptable for the page no longer being shifted around.

Technically, this is implemented in src/wp-admin/css/common.css: .contextual-help-tabs-wrap is turned into a grid container (display: grid), and every .help-tab-content panel is placed in the same grid area (grid-column: 1; grid-row: 1), with visibility/pointer-events being toggled on the active panel instead of display. In src/js/_enqueues/admin/common.js, the tab click handler is simplified accordingly — it now only toggles the .active class, rather than calling jQuery .hide()/.show() on the panels.

A video showing this behavior is available here: ​https://e.pcloud.link/publink/show?code=XZ8RNoZIvqqFT8IjxyUtydou3MpT0VM2f2y