[8.16] [SecuritySolutuion] Fix misaligned toolbar in alerts table (#1…

…96804) (#197039)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[SecuritySolutuion] Fix misaligned toolbar in alerts table
(#196804)](#196804)

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

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

<!--BACKPORT [{"author":{"name":"Jan
Monschke","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-21T11:49:39Z","message":"[SecuritySolutuion]
Fix misaligned toolbar in alerts table (#196804)\n\n##
Summary\r\n\r\nSome items in the alerts table's toolbar were misaligned.
This PR adds a\r\nquick fix for these misaligned items but the actual
fix will hopefully\r\nbe done in EUI
(https://github.com/elastic/eui/pull/8085)\r\n\r\nBefore:\r\n<img
width=\"1265\" alt=\"Screenshot 2024-10-18 at 09 47
53\"\r\nsrc=\"https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf\">\r\n\r\nAfter:\r\n<img
width=\"1274\" alt=\"Screenshot 2024-10-18 at 09 47
14\"\r\nsrc=\"https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a\">\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"082a89797edaa45a5d20b5378f8d521561800218","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","release_note:skip","v9.0.0","Team:Threat
Hunting:Investigations","v8.16.0"],"title":"[SecuritySolutuion] Fix
misaligned toolbar in alerts
table","number":196804,"url":"https://github.com/elastic/kibana/pull/196804","mergeCommit":{"message":"[SecuritySolutuion]
Fix misaligned toolbar in alerts table (#196804)\n\n##
Summary\r\n\r\nSome items in the alerts table's toolbar were misaligned.
This PR adds a\r\nquick fix for these misaligned items but the actual
fix will hopefully\r\nbe done in EUI
(https://github.com/elastic/eui/pull/8085)\r\n\r\nBefore:\r\n<img
width=\"1265\" alt=\"Screenshot 2024-10-18 at 09 47
53\"\r\nsrc=\"https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf\">\r\n\r\nAfter:\r\n<img
width=\"1274\" alt=\"Screenshot 2024-10-18 at 09 47
14\"\r\nsrc=\"https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a\">\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"082a89797edaa45a5d20b5378f8d521561800218"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196804","number":196804,"mergeCommit":{"message":"[SecuritySolutuion]
Fix misaligned toolbar in alerts table (#196804)\n\n##
Summary\r\n\r\nSome items in the alerts table's toolbar were misaligned.
This PR adds a\r\nquick fix for these misaligned items but the actual
fix will hopefully\r\nbe done in EUI
(https://github.com/elastic/eui/pull/8085)\r\n\r\nBefore:\r\n<img
width=\"1265\" alt=\"Screenshot 2024-10-18 at 09 47
53\"\r\nsrc=\"https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf\">\r\n\r\nAfter:\r\n<img
width=\"1274\" alt=\"Screenshot 2024-10-18 at 09 47
14\"\r\nsrc=\"https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a\">\r\n\r\nCo-authored-by:
Elastic Machine
<[email protected]>","sha":"082a89797edaa45a5d20b5378f8d521561800218"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Jan Monschke <[email protected]>

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx

@@ -33,6 +33,7 @@ export const AlertsCount = ({ count }: { count: number }) => {
         border-right: ${euiTheme.border.thin};
         margin-right: ${euiTheme.size.s};
         padding-right: ${euiTheme.size.m};
+        align-self: center;
       `}
     >
       {alertCountText}

x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx

@@ -9,6 +9,7 @@ import { EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedRelative } from '@kbn/i18n-react';
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { css } from '@emotion/react';
 import * as i18n from './translations';
 
 export interface LastUpdatedAtProps {
@@ -36,6 +37,12 @@ Updated.displayName = 'Updated';
 
 const prefix = ` ${i18n.UPDATED} `;
 
+const anchorStyles = {
+  css: css`
+    align-self: center;
+  `,
+};
+
 export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
   ({ compact = false, updatedAt, showUpdating = false }) => {
     const [date, setDate] = useState(Date.now());
@@ -64,7 +71,10 @@ export const LastUpdatedAt = React.memo<LastUpdatedAtProps>(
     }, [compact, date, showUpdating, updatedAt]);
 
     return (
-      <EuiToolTip content={<Updated date={date} prefix={prefix} updatedAt={updatedAt} />}>
+      <EuiToolTip
+        content={<Updated date={date} prefix={prefix} updatedAt={updatedAt} />}
+        anchorProps={anchorStyles}
+      >
         <EuiText color="subdued" size="xs" data-test-subj="toolbar-updated-at">
           {updateText}
         </EuiText>