Skip to content

Commit ca3d14f

Browse files
authored
Clean up global header spacing (#269398)
## Summary Fixes size and spacing across header buttons. - Sets buttons to 32x32; same as left nav - Sets gap to 4; same as left nav - TODO: bring this change to EUI, later **Before** Varying gap and buttons sizes <img width="360" alt="CleanShot 2026-05-14 at 16 05 58@2x" src="https://github.com/user-attachments/assets/08403278-39a3-479b-be3b-ba2340b8454f" /> **After** All same gap; same size <img width="320" alt="CleanShot 2026-05-14 at 15 53 45" src="https://github.com/user-attachments/assets/bdd116e5-7fa6-4c67-bc58-f2deb1673f17" /> ### 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 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) - [ ] ...
1 parent 3759824 commit ca3d14f

1 file changed

Lines changed: 15 additions & 8 deletions

File tree

  • src/core/packages/chrome/browser-components/src/project

src/core/packages/chrome/browser-components/src/project/header.tsx

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const getHeaderCss = ({ size, colors }: EuiThemeComputed) => ({
3939
// needed to enable breadcrumbs truncation
4040
min-width: 0;
4141
flex-shrink: 1;
42+
gap: ${size.xs};
4243
`,
4344
breadcrumbsSectionItem: css`
4445
min-width: 0; // needed to enable breadcrumbs truncation
@@ -106,6 +107,13 @@ export const ProjectHeader = React.memo(() => {
106107
background-color: ${euiTheme.colors.backgroundTransparent};
107108
border-bottom-color: ${euiTheme.colors.backgroundTransparent};
108109
padding-inline: 4px 8px;
110+
111+
.euiHeaderSectionItemButton {
112+
block-size: ${euiTheme.size.xl};
113+
inline-size: ${euiTheme.size.xl};
114+
min-inline-size: ${euiTheme.size.xl};
115+
padding-inline: 0;
116+
}
109117
`;
110118

111119
return (
@@ -133,7 +141,12 @@ export const ProjectHeader = React.memo(() => {
133141
</EuiHeaderSectionItem>
134142
</EuiHeaderSection>
135143

136-
<EuiHeaderSection side="right">
144+
<EuiHeaderSection
145+
side="right"
146+
css={css`
147+
gap: ${euiTheme.size.xs};
148+
`}
149+
>
137150
<EuiHeaderSectionItem>
138151
<HeaderNavControls position="center" />
139152
</EuiHeaderSectionItem>
@@ -142,13 +155,7 @@ export const ProjectHeader = React.memo(() => {
142155
<HeaderHelpMenu />
143156
</EuiHeaderSectionItem>
144157

145-
<EuiHeaderSectionItem
146-
css={css`
147-
gap: ${euiTheme.size.s};
148-
`}
149-
>
150-
<HeaderNavControls position="right" />
151-
</EuiHeaderSectionItem>
158+
<HeaderNavControls position="right" />
152159
</EuiHeaderSection>
153160
</EuiHeader>
154161
</div>

0 commit comments

Comments
 (0)