[Workspace Chrome] Visual Improvements #245898

tsullivan · 2025-12-10T17:57:21Z

Summary

Update the look and feel of the Solution chrome.

Epic: https://github.com/elastic/kibana-team/issues/2106

Changes:

Area	Change
Navigation collapse button	moved from the chrome header to the navigation footer
Application space, App menu bar	globally consistent white background (due to changes in EUI v110) drop shadow
Application space	Spacing at the bottom and right sides between the app content Spacing when the navigation side panel shows (conditionally)
Global header background	shaded

Things to test

dark mode
the expanded/collapsed nav
secondary nav panel
embedded console button at the bottom of the screen (Elasticsearch space)
high contrast mode

Screenshots

Before

After

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Audit all Kibana pages for consistency of stylistic changes
~~[ ] Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support~~
~~[ ] Documentation was added for features that require explanation or tutorials~~
Unit or functional tests were updated or added to match the most common scenarios
~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list~~
[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
~~[ ] Flaky Test Runner was used on any tests changed~~
~~[ ] The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines~~
~~[ ] Review the backport guidelines and apply applicable backport:* labels.~~

Identify risks

~~Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.~~

~~Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.~~

~~[ ] See some risk examples~~
~~[ ] ...~~

…nable this "app sheet" look

This reverts commit 5b7efdc.

…c#244628) One user-facing change we made with [the grid layout](elastic#243181) is that we started displaying the Kibana header next to the sidenav instead of above it. **Before grid layout** <img width="630" height="409" alt="Screenshot 2025-10-31 at 11 22 32" src="https://github.com/user-attachments/assets/f04eaf6a-9605-4346-b105-e172b5f990f2" /> **With grid layout** <img width="591" height="290" alt="Screenshot 2025-10-31 at 11 25 24" src="https://github.com/user-attachments/assets/6e34f379-d979-4c82-a6fc-1c94811f17b6" /> ----- With this PR, we revert this user-facing change and return the header to the top of the nav. <img width="1624" height="1056" alt="Screenshot 2025-11-28 at 12 54 38" src="https://github.com/user-attachments/assets/b8bb6a56-4983-4341-9ae6-e52ac46b5636" />

The layout wrapper has a floating border on a pseudo element, but the children have different z-index levels (e.g. the top bar) which then overlap the container border. Since we want the border to be visible at all times, a regular border would be more fitting here. Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

- EUI updated the type and the query might be null for text searches

…o "combobox" in DataView list component

justinkambic

Obs UI change looks good to me!

tsullivan · 2026-01-05T17:59:36Z

Discover seems to have an extra scrollbar on this branch in the dark mode. The rest LGTM.

@jughosta I'm not sure why the issue was only happening in dark mode, but I've put in a fix that should resolve it: 9a6283e

mohamedhamed-ahmed

LGTM!

elasticmachine · 2026-01-06T00:14:22Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`core`	520	523	+3
`dashboard`	996	997	+1
`developerToolbar`	55	58	+3
total			+7

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/core-chrome-layout-utils`	11	13	+2
`@kbn/core-chrome-navigation`	11	12	+1
total			+3

Async chunks

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

id	before	after	diff
`core`	113.1KB	115.1KB	+2.0KB
`fleet`	2.1MB	2.1MB	-169.0B
`observabilityOnboarding`	126.1KB	126.0KB	-16.0B
`searchHomepage`	184.4KB	184.3KB	-16.0B
`securitySolution`	10.7MB	10.7MB	-86.0B
total			+1.7KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/core`	918	919	+1

Page load bundle

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

id	before	after	diff
`core`	496.9KB	497.9KB	+978.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-layout-constants`	28	29	+1
`@kbn/core-chrome-layout-utils`	30	40	+10
`@kbn/core-chrome-navigation`	47	49	+2
total			+13

History

## Summary Update the look and feel of the Solution chrome. Epic: elastic/kibana-team#2106 Includes elastic#245099 **Changes:** | Area | Change |-|- | Navigation collapse button | <li>moved from the chrome header to the navigation footer | Application space, App menu bar | <li>globally consistent white background (due to changes in EUI v110)<br><li>drop shadow | Application space| <li>Spacing at the bottom and right sides between the app content<br>Spacing when the navigation side panel shows (conditionally) | Global header background | <li>shaded ### Things to test 1. dark mode 2. the expanded/collapsed nav 3. secondary nav panel 4. embedded console button at the bottom of the screen (Elasticsearch space) 5. high contrast mode ## Screenshots **Before** 1. <img width="1835" height="1101" alt="image" src="https://github.com/user-attachments/assets/75a1ded1-f102-42ec-bc7e-804c27b4455b" /> 6. <img width="1835" height="1101" alt="image" src="https://github.com/user-attachments/assets/5301dd03-4cdb-4cd3-8fba-517adfd26b29" /> 7. <img width="1835" height="1101" alt="image" src="https://github.com/user-attachments/assets/b69c176b-7a8a-4d1f-879f-970010381483" /> **After** 1. <img width="1836" height="1100" alt="image" src="https://github.com/user-attachments/assets/7d2b9d75-ee83-4893-83f4-9a6561fd1e04" /> 2. <img width="1835" height="1100" alt="image" src="https://github.com/user-attachments/assets/ae70825b-a52c-43b5-867f-3efd02681c60" /> 3. <img width="1835" height="1100" alt="image" src="https://github.com/user-attachments/assets/177d896c-8e9b-4810-839c-934ea9c7a3a8" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] Audit all Kibana pages for consistency of stylistic changes - ~~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - ~~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - ~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~ - ~~[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - ~~[ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - ~~[ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - ~~[ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.~~ ### Identify risks ~~Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.~~ ~~Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.~~ - ~~[ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)~~ - ~~[ ] ...~~ --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Anton Dosov <anton.dosov@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: ek-so <eksomail@gmail.com> Co-authored-by: Kate Sosedova <36230123+ek-so@users.noreply.github.com>

## Summary In #245898, a regression was added that prevented the vertical scrollbar from being shown in the application container in Kibana. This PR fixes the issue: * Undoing the styles that hid the scrollbar * Address the root cause of when the scrollbar was showing for unwanted reasons - the border around the application container that is added for dark mode. Related discussion: * #245898 (comment) * #243289 (comment) ### Screenshots * **Scroll bar in Observability space, light mode** <img width="1799" height="1043" alt="image" src="https://github.com/user-attachments/assets/724dd433-a641-476b-aacf-363c319ca8d0" /> * **Scroll bar in Observability space, dark mode** <img width="1807" height="1045" alt="image" src="https://github.com/user-attachments/assets/77547470-2115-403c-8c64-48a5073f35b8" /> * Scroll bar in Classic space, light mode: <img width="903" height="522" alt="image" src="https://github.com/user-attachments/assets/9704d51d-c0dd-425d-b751-0f6b6ef23fd9" /> * Scroll bar in Classic space, dark mode: <img width="1801" height="1042" alt="image" src="https://github.com/user-attachments/assets/ec597bb8-6400-4b72-8635-334b7401ddf4" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - ~~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - ~~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - ~~[ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios~~ - ~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~ - ~~[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - ~~[ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - ~~[ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - ~~[ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.~~ ### Identify risk - [x] Now that there is not a proper `border` on the application container, and an `outline` instead, older browsers may not support having the `border-radius` rule on the container. This risk is mitigated by doing full cross-browser testing, testing in light and dark mode, and testing the pages with browser zoom set to 400%. --------- Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

## Summary In elastic#245898, a regression was added that prevented the vertical scrollbar from being shown in the application container in Kibana. This PR fixes the issue: * Undoing the styles that hid the scrollbar * Address the root cause of when the scrollbar was showing for unwanted reasons - the border around the application container that is added for dark mode. Related discussion: * elastic#245898 (comment) * elastic#243289 (comment) ### Screenshots * **Scroll bar in Observability space, light mode** <img width="1799" height="1043" alt="image" src="https://github.com/user-attachments/assets/724dd433-a641-476b-aacf-363c319ca8d0" /> * **Scroll bar in Observability space, dark mode** <img width="1807" height="1045" alt="image" src="https://github.com/user-attachments/assets/77547470-2115-403c-8c64-48a5073f35b8" /> * Scroll bar in Classic space, light mode: <img width="903" height="522" alt="image" src="https://github.com/user-attachments/assets/9704d51d-c0dd-425d-b751-0f6b6ef23fd9" /> * Scroll bar in Classic space, dark mode: <img width="1801" height="1042" alt="image" src="https://github.com/user-attachments/assets/ec597bb8-6400-4b72-8635-334b7401ddf4" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - ~~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - ~~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - ~~[ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios~~ - ~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~~ - ~~[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - ~~[ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - ~~[ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - ~~[ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.~~ ### Identify risk - [x] Now that there is not a proper `border` on the application container, and an `outline` instead, older browsers may not support having the `border-radius` rule on the container. This risk is mitigated by doing full cross-browser testing, testing in light and dark mode, and testing the pages with browser zoom set to 400%. --------- Co-authored-by: Anton Dosov <anton.dosov@elastic.co>

tsullivan and others added 30 commits November 14, 2025 14:17

Make header background transparent

895297a

Make sidenav background transparent

0bfa71b

Fix for making sidenav background transparent

83e6eeb

Make appbar background white

b8e6a29

Add support for marginRight and marginBottom to layout container to e…

e4e0614

…nable this "app sheet" look

Add border-radius and shadow to app container

22dc473

Adjust header logos and collapse button sizing and spacing (WIP)

4c4cc79

Replace hardcoded px value with EUI token

f71e601

Install custom EUI v109 build no.0001 for page template style testing

74e38bf

Remove app space background color overrides

dafdfab

Add new side nav dividers

87a5eb5

update jest snapshots

5b7efdc

Remove Fleet background style customizations

1a6020a

Install custom EUI v109 build no.0002 for page template style testing

f5ed9bc

Merge branch 'main' into workspace-chrome/visual-improvements-i

969feca

Install custom EUI build of main branch no.003

73bf384

Fix nav borders

c74a4ef

Revert "update jest snapshots"

2c21bd5

This reverts commit 5b7efdc.

Changes from node scripts/regenerate_moon_projects.js --update

dd95750

Merge branch 'main' into workspace-chrome/visual-improvements-i

2c74db9

Merge commit '4fc8027~1' into workspace-chrome/visual-improvements-i

2ddcd30

Merge branch 'main' into workspace-chrome/visual-improvements-i

0e35efe

chore: update eui packages

a7b1161

chore(eui): use noItemsMessage prop in EuiInMemoryTable

9e5eef9

refactor: update message prop

e3f9afe

refactor: remove obsolete color prop

de57b6a

refactor: check for available query arg

9318d59

- EUI updated the type and the query might be null for text searches

Update test to reflect role change of search input from "searchbox" t…

1f72d79

…o "combobox" in DataView list component

tsullivan added 2 commits January 5, 2026 10:06

Merge branch 'main' into workspace-chrome/visual-improvements-ii

507a986

hide scrollbar in application grid cell

9a6283e

justinkambic approved these changes Jan 5, 2026

View reviewed changes

tsullivan added 2 commits January 5, 2026 11:04

use derived values for the LayoutProperty type

5c61c0c

state variables rename

daccacc

mohamedhamed-ahmed approved these changes Jan 5, 2026

View reviewed changes

tsullivan and others added 7 commits January 5, 2026 12:36

consolidate high-contrast styles into helper

ea557e3

update test snapshots

0e2a0c8

Changes from node scripts/lint_ts_projects --fix

8b4ac6d

Changes from node scripts/regenerate_moon_projects.js --update

7bd1954

relocate styling code to element

7a8365a

Changes from node scripts/lint_ts_projects --fix

27fb696

Changes from node scripts/regenerate_moon_projects.js --update

49a2000

tsullivan enabled auto-merge (squash) January 5, 2026 23:37

jughosta approved these changes Jan 6, 2026

View reviewed changes

tsullivan merged commit 6445eda into elastic:main Jan 6, 2026
15 checks passed

kibanamachine added the v9.4.0 label Jan 6, 2026

tsullivan deleted the workspace-chrome/visual-improvements-ii branch January 6, 2026 15:22

tsullivan mentioned this pull request Jan 6, 2026

[Chrome] Change Discover's field list background for the New Chrome #248022

Closed

pheyos mentioned this pull request Jan 7, 2026

failsOnMKI: serverless Discover histogram tests #248077

Open

tsullivan mentioned this pull request Jan 9, 2026

Ekso feedback UI tweaks #245099

Closed

tsullivan mentioned this pull request Jan 14, 2026

[Chrome] Fix application scrollbar #249088

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Workspace Chrome] Visual Improvements #245898

[Workspace Chrome] Visual Improvements #245898

Uh oh!

tsullivan commented Dec 10, 2025 •

edited

Loading

Uh oh!

justinkambic left a comment

Uh oh!

tsullivan commented Jan 5, 2026

Uh oh!

mohamedhamed-ahmed left a comment

Uh oh!

elasticmachine commented Jan 6, 2026

API count

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

17 participants

[Workspace Chrome] Visual Improvements #245898

[Workspace Chrome] Visual Improvements #245898

Uh oh!

Conversation

tsullivan commented Dec 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Things to test

Screenshots

Checklist

Identify risks

Uh oh!

justinkambic left a comment

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Jan 5, 2026

Uh oh!

mohamedhamed-ahmed left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jan 6, 2026

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Public APIs missing exports

Page load bundle

API count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

17 participants

tsullivan commented Dec 10, 2025 •

edited

Loading