Prettify the notifications menu

[hishamco]

This PR prittifies the notifications menu as follows:

• Maximize the notification pop-up width to display the titles properly
• Fixes the margin, padding, and font sizes
• Remove unread behavior while the mouse is hovering, coz it isn't very pleasant
• Use title instead of summary

Before

With notifications

Without notifications

After

With notifications

Without notifications

[hishamco]

@Piedone, could you please review if you have time?

[Piedone]

@MikeAlhayek is better suited to review this.

Why did you remove initialize from the JS, BTW?

[hishamco]

Why did you remove initialize from the JS, BTW?

Basically, it's used for initializing the item removal from the notifications pop-up, which is annoying, as I mentioned earlier

[MikeAlhayek]

How does it look on mobile and how does it look when you have many notifications?

[hishamco]

How does it look on mobile and how does it look when you have many notifications?

I didn't change how it looks on mobile, but I will take a screenshot for both cases

[hishamco]

This is how it originally looks when a summary is not supplied

This is how it originally looks when an HTML summary is used accidentally

That's why I suggest showing the subject instead

[MikeAlhayek]

@hishamco what if you make Summary required then? Or, on the render logic if Sunnary does not have a value, fallback to the Summary. But this may make the admin center look funky.

[hishamco]

That's why I'm suggesting using the subject instead, like other apps, I could leave this to a triage meeting

[github-actions[bot]]

It seems that this pull request didn't really move for quite a while. Is this something you'd like to revisit any time soon or should we close? Please comment if you'd like to pick it up.

[hishamco]

@sebastienros, any chance to revisit this in the upcoming triag meeting

[sebastienros]

Can you share a video showing how the change mike mentioned is affected?

[hishamco]

Which is one @sebastienros?