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

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

Verification

• Ensured that more of the notification message is visible in the expanded view.
• 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

• Added context links to the notifications view

[vyncent-t]

Dev note

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

[joaquimrocha]

The PR approach has an issue with cutting off parts of the table. See the screenshot below:

I think we can accomplish a good result with a less engineered effort here. Namely by using gridTemplate: for each column as adequate. The text column should just have auto so it expands, and the rest should have a min-content.
The div around the text column should not have the width={'30vw'}, otherwise it looks artificially cut.

[joaquimrocha]

LGTM. The mobile version is not functional but we should fix that in a different occasion anyway.