[8.x] [ResponseOps][Connectors] Fix flex issues of create connector f…

…lyout with technical badge (#194775) (#194800)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Connectors] Fix flex issues of create connector flyout
with technical badge
(#194775)](#194775)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Michael
DeFazio","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-03T10:04:56Z","message":"[ResponseOps][Connectors]
Fix flex issues of create connector flyout with technical badge
(#194775)\n\n## Summary\r\n\r\nWhen multiple badges are present, the
Technical Preview badge in the\r\nConnector flyout gets pushed away from
the title.\r\n\r\n![CleanShot 2024-10-02 at 20
51\r\n04@2x](https://github.com/user-attachments/assets/2e12e082-9a53-4046-a7a0-7c3bb2d6a100)\r\n\r\nWith
the flexbox fixes\r\n![CleanShot 2024-10-02 at 20
49\r\n40@2x](https://github.com/user-attachments/assets/6a2f92b9-226b-4497-9058-18a5b7cf4ebf)\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] ~Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~\r\n-
[
]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials~\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] ~Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout
[keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n-
[ ] ~Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n-
[ ] ~If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"d22b8306236d98c376c42e94a268fd5f9d8bca85","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","v9.0.0","Feature:Actions/ConnectorTypes","backport:prev-minor","v8.16.0"],"title":"[ResponseOps][Connectors]
Fix flex issues of create connector flyout with technical
badge","number":194775,"url":"https://github.com/elastic/kibana/pull/194775","mergeCommit":{"message":"[ResponseOps][Connectors]
Fix flex issues of create connector flyout with technical badge
(#194775)\n\n## Summary\r\n\r\nWhen multiple badges are present, the
Technical Preview badge in the\r\nConnector flyout gets pushed away from
the title.\r\n\r\n![CleanShot 2024-10-02 at 20
51\r\n04@2x](https://github.com/user-attachments/assets/2e12e082-9a53-4046-a7a0-7c3bb2d6a100)\r\n\r\nWith
the flexbox fixes\r\n![CleanShot 2024-10-02 at 20
49\r\n40@2x](https://github.com/user-attachments/assets/6a2f92b9-226b-4497-9058-18a5b7cf4ebf)\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] ~Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~\r\n-
[
]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials~\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] ~Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout
[keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n-
[ ] ~Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n-
[ ] ~If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"d22b8306236d98c376c42e94a268fd5f9d8bca85"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194775","number":194775,"mergeCommit":{"message":"[ResponseOps][Connectors]
Fix flex issues of create connector flyout with technical badge
(#194775)\n\n## Summary\r\n\r\nWhen multiple badges are present, the
Technical Preview badge in the\r\nConnector flyout gets pushed away from
the title.\r\n\r\n![CleanShot 2024-10-02 at 20
51\r\n04@2x](https://github.com/user-attachments/assets/2e12e082-9a53-4046-a7a0-7c3bb2d6a100)\r\n\r\nWith
the flexbox fixes\r\n![CleanShot 2024-10-02 at 20
49\r\n40@2x](https://github.com/user-attachments/assets/6a2f92b9-226b-4497-9058-18a5b7cf4ebf)\r\n\r\n\r\n###
Checklist\r\n\r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [ ] ~Any text added follows [EUI's
writing\r\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\r\nsentence case text and includes
[i18n\r\nsupport](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)~\r\n-
[
]\r\n~[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)\r\nwas
added for features that require explanation or tutorials~\r\n- [ ] [Unit
or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [ ] [Flaky
Test\r\nRunner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1)
was\r\nused on any tests changed\r\n- [ ] ~Any UI touched in this PR is
usable by keyboard only (learn more\r\nabout
[keyboard\r\naccessibility](https://webaim.org/techniques/keyboard/))~\r\n-
[ ] ~Any UI touched in this PR does not create any new axe
failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))~\r\n-
[ ] ~If a plugin configuration key changed, check if it needs to
be\r\nallowlisted in the cloud and added to the
[docker\r\nlist](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)~\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n-
[x] This was checked for
[cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"d22b8306236d98c376c42e94a268fd5f9d8bca85"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Michael DeFazio <[email protected]>

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/header.tsx

@@ -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