frontend: Fix notifications format styles

[vyncent-t]

Enhancements to Notifications List View for Better UX

Solves issue #1667

Description

This PR focuses on improving the user experience of the Notifications List View. It involves utilizing the available horizontal space more effectively to display a larger portion of the notification message. Additionally, the cluster name in each notification will now be a clickable link, redirecting users directly to the associated cluster.

Changes

• [x] Expanded the message display area in the Notifications List View to make better use of horizontal space.
• [x] Converted cluster names in notifications into hyperlinks that lead to the respective clusters.

Verification

• [x] Ensured that more of the notification message is visible in the expanded view.
• [x] Tested the functionality of the new cluster links to confirm they correctly redirect to the appropriate cluster.

Screenshots

[vyncent-t]

Dev notes

• This push is a solid base, I have tweaked the vw for each size to not clip or run into other columns (ignore the colors)

• I am using the CellProps and a custom style map to put in custom style changes to achieve this

• Currently using useEffect to rerender when any screen size changes, when it changes it grabs a new view size for the message column

• The comps are responsive Large

Medium

Small

[vyncent-t]

Dev note

• [x] Added context links to the notifications view

[vyncent-t]

Dev note

• [x] created more space for notification message and context link
• [x] shrank the space needed for the color signals
• [x] removed box style for context link