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

…96804)

## Summary

Some items in the alerts table's toolbar were misaligned. This PR adds a
quick fix for these misaligned items but the actual fix will hopefully
be done in EUI (elastic/eui#8085)

Before:
<img width="1265" alt="Screenshot 2024-10-18 at 09 47 53"
src="https://github.com/user-attachments/assets/b5220e8f-f26e-4847-8326-504863bc39bf">

After:
<img width="1274" alt="Screenshot 2024-10-18 at 09 47 14"
src="https://github.com/user-attachments/assets/ff6cbc31-301a-4b43-afc2-938262118d8a">

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 082a897)

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>