Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix SolutionNav padding in pages that use overridden EUI breakpoints #211513

Merged

Conversation

tkajtoch
Copy link
Member

@tkajtoch tkajtoch commented Feb 17, 2025

Summary

Fixes #211474

This PR fixes a bug introduced in #207008 that caused the <SolutionNav /> component to not have the padding style defined when rendered on certain Observability pages.

The underlying issue was caused by useEuiBreakpoint(['m', 'l', 'xl']) hook to define breakpoints while the APM, Synthetics, and User Experience apps modify the default EUI breakpoints to add custom xxl (>=1600px) and xxxl (>=2000px) levels. This breakpoint modification resulted in not all breakpoint levels being recognized as matching and the padding style not applied.

Before After
Screenshot 2025-02-18 at 00 33 08 Screenshot 2025-02-18 at 00 30 23

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

  • The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines

@tkajtoch tkajtoch added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) v9.1.0 labels Feb 17, 2025
@tkajtoch tkajtoch self-assigned this Feb 17, 2025
@tkajtoch tkajtoch requested a review from a team as a code owner February 17, 2025 23:37
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
automaticImport 1.1MB 1.1MB -8.0B
canvas 1.0MB 1.0MB -8.0B
dashboard 535.6KB 535.6KB -8.0B
enterpriseSearch 1.3MB 1.3MB -8.0B
eventAnnotationListing 235.0KB 235.0KB -8.0B
filesManagement 106.3KB 106.3KB -8.0B
graph 405.9KB 405.9KB -8.0B
home 139.0KB 139.0KB -8.0B
indexManagement 713.1KB 713.0KB -8.0B
infra 1.1MB 1.1MB -8.0B
kibanaOverview 54.5KB 54.5KB -8.0B
management 32.6KB 32.6KB -8.0B
maps 2.9MB 2.9MB -8.0B
ml 5.2MB 5.2MB -8.0B
observabilityShared 37.1KB 37.1KB -8.0B
osquery 1.0MB 1.0MB -8.0B
searchHomepage 33.8KB 33.8KB -8.0B
searchIndices 180.2KB 180.2KB -8.0B
searchInferenceEndpoints 104.7KB 104.7KB -8.0B
searchPlayground 186.2KB 186.2KB -8.0B
searchSynonyms 41.7KB 41.7KB -8.0B
security 549.7KB 549.7KB -8.0B
securitySolution 8.9MB 8.9MB -8.0B
securitySolutionEss 30.0KB 29.9KB -8.0B
securitySolutionServerless 54.2KB 54.1KB -8.0B
spaces 269.7KB 269.7KB -8.0B
visualizations 364.5KB 364.5KB -8.0B
total -216.0B

Page load bundle

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

id before after diff
esUiShared 88.3KB 88.3KB -8.0B

cc @tkajtoch

@tkajtoch tkajtoch merged commit ff2e3dd into elastic:main Feb 18, 2025
19 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 9.0

https://github.com/elastic/kibana/actions/runs/13387413193

@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Feb 18, 2025
…kpoints (#211513) (#211535)

# Backport

This will backport the following commits from `main` to `9.0`:
- [Fix `SolutionNav` padding in pages that use overridden EUI
breakpoints (#211513)](#211513)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Tomasz
Kajtoch","email":"tomasz.kajtoch@elastic.co"},"sourceCommit":{"committedDate":"2025-02-18T09:31:23Z","message":"Fix
`SolutionNav` padding in pages that use overridden EUI breakpoints
(#211513)","sha":"ff2e3dd36f4d9b0dd1705bc0e1235fc5fa92a94c","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","v9.1.0"],"title":"Fix
`SolutionNav` padding in pages that use overridden EUI
breakpoints","number":211513,"url":"https://github.com/elastic/kibana/pull/211513","mergeCommit":{"message":"Fix
`SolutionNav` padding in pages that use overridden EUI breakpoints
(#211513)","sha":"ff2e3dd36f4d9b0dd1705bc0e1235fc5fa92a94c"}},"sourceBranch":"main","suggestedTargetBranches":["9.0"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/211513","number":211513,"mergeCommit":{"message":"Fix
`SolutionNav` padding in pages that use overridden EUI breakpoints
(#211513)","sha":"ff2e3dd36f4d9b0dd1705bc0e1235fc5fa92a94c"}}]}]
BACKPORT-->

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (9.0) the previous minor version (i.e. one version back from main) release_note:skip Skip the PR/issue when compiling release notes v9.0.0 v9.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[OBX-UX-MNGT][BUG] Observability side navigation padding is missing on APM, Synthetics and UX
5 participants