fix(layout): restore growable app shell so injected content above #app doesn't clip it

[sadpandajoe]

SUMMARY

Root cause: #31590 (commit dd129fa, the Ant Design v5 overhaul) replaced
the Superset 5 shell — body { min-height: 100vh; display: flex; flex-direction: column }, #app { flex: 1 1 auto; position: relative; display: flex; flex-direction: column } (from
superset-frontend/src/assets/stylesheets/less/index.less) — with a fixed
html, body, #app { height: 100%; } model in
superset-frontend/packages/superset-core/src/theme/GlobalStyles.tsx. When a
host page embeds Superset in the same document and injects content above
#app (the reporter embeds it under a geOrchestra menu), #app still
claims a full viewport instead of shrinking for that sibling, and its
bottom gets pushed off-screen. On Explore, body { height: 100vh; max-height: 100vh; overflow: hidden } turns that overflow into something
genuinely unreachable.

The fix has two halves. GlobalStyles.tsx: body is a min-height: 100vh
flex column again, and #app has no explicit height, so it flex-grows into
whatever space its siblings leave it. App.tsx: pageScrollShellCss — the
<Flex> that is #app's only in-flow child — drops its own min-height: 100vh for flex: 1 1 auto; min-height: 0, so it sizes to the space #app
grants it rather than re-claiming a full viewport on its own. Shrinking
#app alone isn't enough: without this, the shell would overflow #app
again and #app's overflow: hidden would clip it right back.

Content taller than #app still grows the shell, so window page scrolling
and hide-navbar-on-scroll behavior are unchanged.

lockedShellCss (the chat-panel-open shell) is deliberately untouched: with
a host-injected header, that shell flex-shrinks to fit #app on Explore the
same way, and on page-scroll routes it still needs a page scroll equal to
the injected height — unchanged from before this fix.

Explore's own #app override (ExploreViewContainer/index.tsx) needs no
change — it already carries height: 100% from before #31590, and a
Chromium ablation confirms that property, min-height: 0, no property at
all, and even height: 100vh all produce byte-identical geometry here,
since flex-basis: 100% already overrides height for flex-basis purposes
and overflow: hidden already zeroes the item's automatic minimum size.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

No screenshots attached. A live Explore preview with a 60px host banner was
captured before and after, but the two deploys loaded different default
charts, so the images are not a like-for-like comparison. Evidence instead:
a Chromium (Playwright) layout harness, 1000x800 viewport, with a 60px <div>
injected as a sibling before #app, reproducing the real
body → #app → shell → Layout/Layout.Content → portal chain and antd's own
Layout defaults. On Explore, the bottom control's bottom edge sits at y=850
(clipped, and unreachable even after simulated wheel-scroll input) before
this fix, and at y=790 (fully visible, viewport height 800) after. The
no-header case is identical before and after. SQL Lab, a generic tall
page-scroll route, and the chat-locked shell measure identically with and
without the injected header.

TESTING INSTRUCTIONS

1. Add a 60px <div> immediately before <div id="app"> in
   superset/templates/superset/spa.html (simulating a host page's injected
   banner/menu).
2. Open Explore for any chart — the bottom chart-action controls should be
   fully reachable (not clipped, no scrolling needed).
3. Remove the injected <div> and confirm Explore, SQL Lab, a dashboard,
   and the welcome page all look visually unchanged; long pages should
   still page-scroll with the navbar hiding on scroll, and the chat panel
   (if the extension is enabled) should still lock the shell as before.

The two added tests (App.test.tsx, GlobalStyles.test.tsx) assert the CSS
contract directly (the actual emotion-injected rules), not rendered
geometry — jsdom doesn't compute layout, so they don't substitute for the
manual check above.

ADDITIONAL INFORMATION

• Has associated issue: Fixes Content overflow if Superset doesn't have 100% of the viewport #44867
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codeant-ai-for-open-source]

CodeAnt PR Risk: Low Risk

• The PR appears safe to merge; the changes align the app shell with a growable viewport layout.
• Tests cover the body, #app, and page-scroll shell CSS constraints relevant to the reported clipping behavior.

Assessed commit: cbbab1272adb

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 82.59%. Comparing base (6f6be95) to head (cbbab12).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #45056   +/-   ##
=======================================
  Coverage   82.59%   82.59%           
=======================================
  Files        3005     3005           
  Lines      186920   186920           
  Branches    43300    43300           
=======================================
+ Hits       154382   154383    +1     
+ Misses      29773    29772    -1     
  Partials     2765     2765           

Flag	Coverage Δ
javascript	78.33% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[gabotorresruiz]

Hey Joe, this holds up. I reproduced the symptom and the fix in Chromium using the repo's own CSS (GlobalStyles, App.tsx, and the ExploreViewContainer and SqlLabGlobalStyles globals) with a 60px sibling injected before #app: on the merge base the bottom 60px of #app sits past the viewport on Explore, SQL Lab and the list pages, and since body { overflow: hidden } propagates to the viewport a real wheel event moves nothing (window.scrollY stays 0), so it is genuinely unreachable; on this branch #app shrinks and all of it is reachable. Your root cause checks out too: dd129fa403^ of index.less really does carry the min-height: 100vh flex column body and the height-less #app you are restoring.

With nothing injected, the screenshots are byte identical between the merge base and this branch for Explore and for a dashboard (short and tall content), and every painted box matches at every scroll offset: sticky dashboard header and sticky filter bar on the same pixel, same max page scroll, no new scrollable element, antd body level portals still zero height under the flex body, and getScrollSize() returns the same document.body.scrollHeight on the embedded entry at 400px and 800px iframe heights. Both GlobalStyles.test.tsx cases fail on the merge base for the right reason; the App.test.tsx one fails there only because pageScrollShellCss is not exported yet, which matches what you say about these pinning the CSS contract rather than the geometry.

CI is green, 65 checks passing and nothing pending.

[gabotorresruiz]

Not a blocker, and not a regression either since the merge base cuts off the same 60px. But the reasoning in the description for leaving lockedShellCss alone does not quite cover SQL Lab. Explore gets away with it because ExploreViewContainer's global gives body a definite height: 100vh, so the 100vh locked shell has negative free space and flex shrinks inside the shortened #app. SqlLabGlobalStyles only sets min-height: max(100vh, 500px) plus overflow: hidden, so body just grows to 860px, nothing shrinks, and the hidden overflow leaves the last 60px unreachable rather than a page scroll away. Measured with a 60px banner at an 800px viewport: panel closed, the results pane bottom moves from 860 on the merge base to 800 here; panel open, it stays at 860 on both. Worth a sentence in the description, or happy to leave it for whoever picks up the locked shell next.