Repository navigation
Conversation
Dosant
added
release_note:skip
Contributor
|
🤖 Jobs for this PR can be triggered through checkboxes. 🚧
ℹ️ To trigger the CI, please tick the checkbox below 👇
|
Contributor
💔 Build Failed
Failed CI Steps
Metrics [docs]Async chunks
Count of Enzyme imports
Page load bundle
Unknown metric groups@kbn/rspack-optimizer bundle module count
ESLint disabled in files
ESLint disabled line counts
shared async chunk count
shared async chunks total size
shared chunk count
shared chunks total size
Total ESLint disabled count
total optimizer output size
workflow yaml validation
Test Failures
History |
Behind localStorage.kbnSurfacePoc. The app area is a container surface, and content inside it measures the app area. Chrome, overlays, toasts and portals use the window.
Kibana context providers take mountElement and forward it to EuiProvider behind localStorage.kbnSurfacePoc. RenderingService.addContext accepts an optional mountElement, and toMountPoint passes its element. chrome-layout marks the outer app area wrapper as a breakpoint container; EUI now owns the container CSS, including the body fallback.
kbnSurfacePoc now takes 'css' (CSS track only) or 'js' (CSS and JS tracks).
Roots that pass a mountElement measure their nearest breakpoint container. Roots without one keep following the window, so a root mounted outside the app area can't pick up the app area by mistake. The example app opts in, core chrome and toMountPoint don't.
…reakpoints Each app root passes its mount element, so EUI breakpoint hooks in these apps follow the app area with kbnSurfacePoc = 'js'.
…ner mixin Updates the packed EUI build to include the mixin.
Scope EuiFlyout to the app area wrapper instead of #app-main-scroll, so push padding shrinks the breakpoint container and breakpoints follow the area left next to the flyout.
Dosant
force-pushed
the
d/2026-09-25-surface-breakpoints-poc
branch
from
October 26, 2026 11:28
3e87654 to
ca0e59c
Compare
Contributor
💔 Build Failed
Failed CI Steps
Metrics [docs]Async chunks
Page load bundle
Unknown metric groups@kbn/rspack-optimizer bundle module count
shared async chunk count
shared async chunks total size
shared chunk count
shared chunks total size
total optimizer output size
warm start memory
workflow yaml validation
Test Failures
History |
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of elastic/kibana-team#3040
Depends on elastic/eui#10192
Summary
Proof of concept, not for merge.
With the sidebar open, the app area gets narrower but EUI breakpoints still read the window, so pages keep their desktop layout in a squished area. This PoC makes EUI breakpoints for content inside the app area follow the app area, and keeps everything else on the window.
Switch the mode from the "Breakpoints" badge in the developer toolbar, available on every page in dev mode. It saves the choice to
localStorage.kbnSurfacePocand reloads.'css'switches only the CSS breakpoint mixins.'js'also switches the JS hooks, for React roots that opt in:euiBreakpointContainerstyle mixin, and marks it with thedata-eui-breakpoint-containerattribute for the JS hooks. Both go on the outer wrapper, not on#app-main-scroll. A container becomes the containing block forposition: fixeddescendants, and on a scroll container they would scroll away with the content. The mixin only emits CSS when the option is on.KibanaEuiProviderscopesEuiFlyoutto the same wrapper (it used#app-main-scroll). Push flyouts pad their container, and padding on#app-main-scrolldidn't change the wrapper's size, so content next to a push flyout kept the full app area breakpoint. Now the padding shrinks the breakpoint container. The push vs overlay decision reads the wrapper's border box, so the padding doesn't feed back into it.KibanaEuiProvider,KibanaRootContextProviderandKibanaRenderContextProvidertake amountElement, andRenderingService.addContextaccepts an optional{ mountElement }. With'css'the provider passesbreakpointContainer: true. With'js'it passes{ mountElement }when the root has one, andtrueotherwise, so JS hooks in that root keep following the window.toMountPointand all other apps keep the window in JS. Opting in is one option at the mount site.examples/responsive_app_area_exampleat/app/responsiveAppAreaExamplewalks through both tracks: how each works, what it fixes and its issues, with a Window | CSS | CSS + JS toggle.Why opt-in: an earlier version assumed a root without an element was in the app area. A React root mounted somewhere else would then measure the wrong container in JS, and there's no easy way to find those roots up front. With opt-in, the worst case for a root that hasn't opted in is today's behavior. The cost is that CSS and JS can disagree inside the app area until a root opts in, e.g. the chrome slots in the top and bottom bars follow the app area in CSS but the window in JS.
Running it
The PR includes a packed build of the EUI branch (
elastic_eui_123.1.0_surface_poc_2.tgz), so CI and a plainpnpm kbn bootstrapuse it.node scripts/kibana --dev --run-examples.yarn watch:kibana -p @elastic/eui -d <kibana checkout>from the EUI branch. EUI changes, and changes to@kbn/react-kibana-context-root, only reach the browser after a shared deps rebuild. Stop Kibana, deletetarget/build/src/platform/packages/private/kbn-ui-shared-deps-{npm,src}/shared_built_assets, runnpx moon run @kbn/ui-shared-deps-src:build-webpack --force, then restart.