Skip to content

Commit

Permalink
[ResponseOps][Connectors] Fix flex issues of create connector flyout …
Browse files Browse the repository at this point in the history
…with technical badge (elastic#194775)

## Summary

When multiple badges are present, the Technical Preview badge in the
Connector flyout gets pushed away from the title.

![CleanShot 2024-10-02 at 20 51
04@2x](https://github.com/user-attachments/assets/2e12e082-9a53-4046-a7a0-7c3bb2d6a100)

With the flexbox fixes
![CleanShot 2024-10-02 at 20 49
40@2x](https://github.com/user-attachments/assets/6a2f92b9-226b-4497-9058-18a5b7cf4ebf)


### Checklist

Delete any items that are not applicable to this PR.

- [ ] ~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/packages/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
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] ~Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard
accessibility](https://webaim.org/techniques/keyboard/))~
- [ ] ~Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~
- [ ] ~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)~
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
  • Loading branch information
mdefazio authored Oct 3, 2024
1 parent 9f58ffd commit d22b830
Showing 1 changed file with 2 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ const FlyoutHeaderComponent: React.FC<Props> = ({
<EuiFlexItem grow={false}>
{actionTypeName && actionTypeMessage ? (
<>
<EuiFlexGroup gutterSize="s" justifyContent="center" alignItems="center">
<EuiFlexItem>
<EuiFlexGroup gutterSize="s" justifyContent="flexStart" alignItems="center">
<EuiFlexItem grow={false}>
<EuiTitle size="s">
<h3 id="flyoutTitle">
<FormattedMessage
Expand Down

0 comments on commit d22b830

Please sign in to comment.