Skip to content

[Responsive Kibana] Make EUI CSS and JS breakpoints follow the app area - #297119

Draft
Dosant wants to merge 4 commits into
elastic:mainfrom
Dosant:d/2026-10-12-breakpoint-marker-js
Draft

Dosant wants to merge 4 commits into
elastic:mainfrom
Dosant:d/2026-10-12-breakpoint-marker-js

Conversation

@Dosant

@Dosant Dosant commented Oct 12, 2026

Copy link
Copy Markdown
Contributor

Part of elastic/kibana-team#3040
Depends on elastic/eui#10192
CSS only: #296816
Full PoC with both tracks: #296462

Summary

Not for merge. This runs CI with both tracks on, to see what breaks.

Same as the CSS-only PR, plus JS: KibanaEuiProvider finds the element its React root is mounted in and passes it to EUI. EUI measures the nearest breakpoint container from there, so useCurrentEuiBreakpoint, EuiShowFor and EuiHideFor follow the app area too. No app changes.

The provider finds the element with a hidden marker. On the first commit it renders only a <span hidden>, reads its parent in a layout effect, then renders the children before paint. The cost is one extra commit per root mount. Roots rendered into an element that isn't in the page yet fall back to body, and get data-kbn-breakpoint-detached so they're easy to spot.

renderToStaticMarkup runs no layout effects, so string-rendered tooltips skip the marker and render the children right away.

To see which roots follow the app area, set localStorage.kbnSurfacePocDebug = 'true' and reload. Roots inside the app area get a red outline, the rest purple.

EUI comes from a packed build of the EUI branch, elastic_eui_123.1.0_surface_poc_2.tgz.

Dosant added 4 commits October 9, 2026 17:09
Uses a packed build of the EUI breakpoint container branch.
…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.
KibanaEuiProvider renders a hidden span on the first commit, reads its parent and
replaces it with the children before paint. EUI then measures the nearest breakpoint
container from that element, so JS hooks follow the app area without app changes.
@Dosant Dosant added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// labels Oct 12, 2026
@infra-vault-gh-plugin-prod

infra-vault-gh-plugin-prod Bot commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor
🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

  • Click to trigger kibana-pull-request for this PR!
  • Click to trigger kibana-deploy-project-from-pr for this PR!
  • Click to trigger kibana-deploy-cloud-from-pr for this PR!
  • Click to trigger kibana-entity-store-performance-from-pr for this PR!
  • Click to trigger kibana-storybooks-from-pr for this PR!

@Dosant

Dosant commented Oct 12, 2026

Copy link
Copy Markdown
Contributor Author

/ci

@kibanamachine

kibanamachine commented Oct 12, 2026 •

Copy link
Copy Markdown
Contributor

💔 Build Failed

Failed CI Steps

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
kbnUiSharedDeps-npmDll 7.7MB 7.7MB +2.9KB
kbnUiSharedDeps-srcJs 5.4MB 5.4MB +922.0B
shared-misc 141.6KB 141.7KB +90.0B
vendors 4.4MB 4.4MB +3.1KB
total +7.1KB
Unknown metric groups

@kbn/rspack-optimizer bundle module count

id before after diff
vendors 838 839 +1

total optimizer output size

id before after diff
all 65.9MB 65.9MB +3.2KB

warm start memory

id before after diff
post forced gc heap baseline - 820019994 +820019994
post forced gc heap delta - -1723520 -1723520
post forced gc heap delta standard deviation - 1871393 +1871393
post forced gc heap target - 818296474 +818296474
tail heap delta - -24280606 -24280606
total +1614183735

workflow yaml validation

id before after diff
case_response.yaml (27 steps, 66 vars)/e2e/performComputation 11 12 +1
infosec_demo.yaml (150 steps, 270 vars)/e2e/performComputation 47 49 +2
infosec_demo.yaml (150 steps, 270 vars)/e2e/total 120 124 +4
infosec_demo.yaml (150 steps, 270 vars)/e2e/validateIfConditions 5 4 -1
infosec_demo.yaml (150 steps, 270 vars)/e2e/validateVariables 43 44 +1
infosec_demo.yaml (150 steps, 270 vars)/validateIfConditions 4 5 +1
infosec_demo.yaml (150 steps, 270 vars)/validateVariables (270 vars) 41 42 +1
total +9

Test Failures

  • [job] [logs] Jest Tests #6 / renders without crashing
  • [job] [logs] Jest Tests #6 / renders without crashing
  • [job] [logs] Jest Tests #5 / it renders without blowing up
  • [job] [logs] Jest Tests #5 / it renders without blowing up
  • [job] [logs] FTR Configs #68 / Journey[login] Login
  • [job] [logs] Scout Lane #85 - serverless-observability_complete / default / local-serverless-observability_complete - Console core - resizes the editor with the window
  • [job] [logs] Scout Lane #85 - serverless-observability_complete / default / local-serverless-observability_complete - Console core - resizes the editor with the window
  • [job] [logs] Scout Lane #79 - serverless-observability_complete / default / local-serverless-observability_complete - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #79 - serverless-observability_complete / default / local-serverless-observability_complete - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #75 - serverless-observability_complete / default / local-serverless-observability_complete - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #75 - serverless-observability_complete / default / local-serverless-observability_complete - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #66 - serverless-observability_complete / default / local-serverless-observability_complete - Service inventory - renders page with selected date range
  • [job] [logs] Scout Lane #66 - serverless-observability_complete / default / local-serverless-observability_complete - Service inventory - renders page with selected date range
  • [job] [logs] Scout Lane #60 - serverless-search / default / local-serverless-search - Console core - resizes the editor with the window
  • [job] [logs] Scout Lane #60 - serverless-search / default / local-serverless-search - Console core - resizes the editor with the window
  • [job] [logs] Scout Lane #58 - serverless-search / default / local-serverless-search - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #58 - serverless-search / default / local-serverless-search - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #96 - serverless-security_complete / default / local-serverless-security_complete - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #96 - serverless-security_complete / default / local-serverless-security_complete - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #96 - serverless-security_complete / default / local-serverless-security_complete - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #96 - serverless-security_complete / default / local-serverless-security_complete - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #22 - stateful-classic / default / local-stateful-classic - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #22 - stateful-classic / default / local-stateful-classic - Data streams index mode - allows to downgrade data stream from logsdb to time series index mode
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - focuses the flyout on open and retains focus when resizing between push and overlay
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - focuses the flyout on open and retains focus when resizing between push and overlay
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - renders the screen reader description only for the push flyout
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - renders the screen reader description only for the push flyout
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - returns focus to the trigger element when the flyout is closed
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - returns focus to the trigger element when the flyout is closed
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - uses the expected a11y attributes
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - accessibility - uses the expected a11y attributes
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the data grid is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the data grid is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the resize handle is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the resize handle is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the search input is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the search input is focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the tabs are focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - does not navigate between documents with arrow keys when the tabs are focused
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - navigates between documents with arrow keys
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - arrow keys - navigates between documents with arrow keys
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - escape key - closes the flyout
  • [job] [logs] Scout Lane #10 - stateful-classic / default / local-stateful-classic - Discover doc viewer flyout - escape key - closes the flyout
  • [job] [logs] Scout Lane #6 - stateful-classic / default / local-stateful-classic - Discover tabs - ES|QL controls - persists controls through saved sessions and unsaved-change revert
  • [job] [logs] Scout Lane #6 - stateful-classic / default / local-stateful-classic - Discover tabs - restorable DocViewer table state - restores DocViewer field type filters and selected-only state per tab
  • [job] [logs] Scout Lane #6 - stateful-classic / default / local-stateful-classic - Discover tabs - restorable DocViewer table state - restores DocViewer field type filters and selected-only state per tab
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#10061: closing the older of two system push flyouts keeps the newer one open
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#10061: closing the older of two system push flyouts keeps the newer one open
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing a standalone push flyout keeps the page pushed for an open system push flyout
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing a standalone push flyout keeps the page pushed for an open system push flyout
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing a system overlay keeps the padding of a standalone push flyout under it
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing a system overlay keeps the padding of a standalone push flyout under it
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing the older of two standalone push flyouts first leaves no padding behind
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: closing the older of two standalone push flyouts first leaves no padding behind
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: the padding follows the widest push flyout, including one resized in the background
  • [job] [logs] Scout Lane #39 - stateful-classic / examples / local-stateful-classic - Flyout System - push flyouts - elastic/eui#9788: the padding follows the widest push flyout, including one resized in the background
  • [job] [logs] Scout Lane #23 - stateful-classic / default / local-stateful-classic - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #23 - stateful-classic / default / local-stateful-classic - Metrics in Discover - Grid Settings - never shows the configuration and insights flyouts at the same time
  • [job] [logs] Scout Lane #23 - stateful-classic / default / local-stateful-classic - Metrics in Discover - Insights Flyout - should paginate through dimensions in flyout
  • [job] [logs] Scout Lane #23 - stateful-classic / default / local-stateful-classic - Metrics in Discover - Insights Flyout - should paginate through dimensions in flyout
  • [job] [logs] Scout Lane #8 - stateful-classic / default / local-stateful-classic - ScalablePrivateLocationMaintenanceWindowSync - redeploys an updated maintenance window and bumps the agent policy
  • [job] [logs] Jest Tests #12 / renderMatrixHtml renders each variant card with its own per-example score, not the column aggregate

History

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:skip This PR does not require backporting ci:build-draft release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t//

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants