[SecuritySolutuion] Fix misaligned toolbar in alerts table (#196804)

janmonschke · elasticmachine · janmonschke · commit 29cdbe68bd9f · 2024-10-21T11:54:27.000Z
## 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)
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/alerts_count/alerts_count.tsx b/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}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/last_updated_at/index.tsx b/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>

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,7 @@ export const AlertsCount = ({ count }: { count: number }) => {`
`33`	`33`	`border-right: ${euiTheme.border.thin};`
`34`	`34`	`margin-right: ${euiTheme.size.s};`
`35`	`35`	`padding-right: ${euiTheme.size.m};`
	`36`	`+ align-self: center;`
`36`	`37`	`}
`37`	`38`	`>`
`38`	`39`	`{alertCountText}`