diff --git a/.changeset/warm-fans-promise.md b/.changeset/warm-fans-promise.md new file mode 100644 index 0000000000..a8a8f8a2c7 --- /dev/null +++ b/.changeset/warm-fans-promise.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-notifications': patch +--- + +The rendered size of a notification is limited for very long descriptions. diff --git a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx index daaa937611..3b34f9766b 100644 --- a/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx +++ b/plugins/notifications/src/components/NotificationsTable/NotificationsTable.tsx @@ -21,6 +21,7 @@ import Box from '@material-ui/core/Box'; import Grid from '@material-ui/core/Grid'; import CheckBox from '@material-ui/core/Checkbox'; import Typography from '@material-ui/core/Typography'; +import { makeStyles } from '@material-ui/core/styles'; import { Notification } from '@backstage/plugin-notifications-common'; import { notificationsApiRef } from '../../api'; @@ -38,6 +39,16 @@ import { BulkActions } from './BulkActions'; const ThrottleDelayMs = 1000; +const useStyles = makeStyles({ + description: { + maxHeight: '5rem', + overflow: 'scroll', + }, + severityItem: { + alignContent: 'center', + }, +}); + /** @public */ export type NotificationsTableProps = Pick< TableProps, @@ -62,6 +73,7 @@ export const NotificationsTable = ({ pageSize, totalCount, }: NotificationsTableProps) => { + const classes = useStyles(); const notificationsApi = useApi(notificationsApiRef); const [selectedNotifications, setSelectedNotifications] = React.useState( new Set(), @@ -155,10 +167,10 @@ export const NotificationsTable = ({ // Compact content return ( - + - + {notification.payload.link ? ( @@ -169,7 +181,7 @@ export const NotificationsTable = ({ notification.payload.title )} - + {notification.payload.description} @@ -211,11 +223,13 @@ export const NotificationsTable = ({ }, ], [ + selectedNotifications, + notifications, onSwitchReadStatus, onSwitchSavedStatus, - selectedNotifications, onNotificationsSelectChange, - notifications, + classes.severityItem, + classes.description, ], );