Skip to content

Commit

Permalink
[SecuritySolutuion] Fix misaligned toolbar in alerts table (#196804)
Browse files Browse the repository at this point in the history
## 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>
  • Loading branch information
janmonschke and elasticmachine authored Oct 21, 2024
1 parent 63ebd41 commit 082a897
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 082a897

Please sign in to comment.