Improve header button spacing (#197896)

Closes #197873 

## Summary

- Fix spacing between 'Give feedback' and AI button.
- While in the neighborhood, I noticed the search button had some extra
padding, so I fixed that quick too.
- Lastly, I pushed the project switcher to the far right. This is only
used for local development of Serverless and was otherwise appearing
between production buttons.

### Before
<img width="420"
src="https://github.com/user-attachments/assets/f5abe1af-1762-4658-8040-d802b9752667"
/>

<img width="420"
src="https://github.com/user-attachments/assets/04288ff3-6012-4518-866f-0dea4ad62401"
/>

### After
<img width="420"
src="https://github.com/user-attachments/assets/ef2e0eff-d4f4-4ceb-bbf8-c39d2e3e9949"
/>

## QA
To test, you'll need to run this in serverless mode where the 'Give
feedback' button appears.
You can force it on by setting the following line equal to `true`.

ae9c0d3850/src/plugins/guided_onboarding/public/plugin.tsx (L50)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Ryan Keairns 2024-10-28 09:24:23 -07:00 committed by GitHub
parent babb0feb8e
commit 1066064c98
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 4 deletions

View file

@ -306,7 +306,11 @@ export const ProjectHeader = ({
/>
</EuiHeaderSectionItem>
<EuiHeaderSectionItem>
<EuiHeaderSectionItem
css={css`
gap: ${euiTheme.size.s};
`}
>
<HeaderNavControls navControls$={observables.navControlsRight$} />
</EuiHeaderSectionItem>
</EuiHeaderSection>

View file

@ -325,11 +325,12 @@ export const SearchBar: FC<SearchBarProps> = (opts) => {
buttonRef={visibilityButtonRef}
color="text"
data-test-subj="nav-search-reveal"
iconType="search"
onClick={() => {
setIsVisible(true);
}}
/>
>
<EuiIcon type="search" size="m" />
</EuiHeaderSectionItemButton>
);
}

View file

@ -61,7 +61,7 @@ export class ServerlessPlugin
const { currentType } = developer.projectSwitcher;
core.chrome.navControls.registerRight({
order: 500,
order: 5000,
mount: (target) => this.mountProjectSwitcher(target, core, currentType),
});
}