[notification] Standardize notification size on non-stretch position

[rolandoisidoro]

Description

vaadin-notification offers 9 possible placement positions:

• BOTTOM_CENTER;
• BOTTOM_END;
• BOTTOM_START;
• BOTTOM_STRETCH;
• MIDDLE;
• TOP_CENTER;
• TOP_END;
• TOP_START;
• TOP_STRETCH.

The size of the notification seem to follow 3 different rule sets:

1. Top and bottom non-stretch (6 positions) - Varies with resolution;
2. Top and bottom stretch (2 positions) - Uses the whole width with no margins;
3. Middle - Fixed rules, smallest value between 20em (which translates to 320px) and 80vw.

Expected outcome

Notification width shouldn't be smaller on higher resolutions.

Actual outcome

For the 1st set of rules, which apply to 6/9 positions:

• Bellow 420px the notification uses the whole available width and has margin: var(--lumo-space-s);, which means that at 420px, vaadin-notification-card is 404px wide;
• At 421px, vaadin-notification-card is 209.75px wide;
• At 1260px, vaadin-notification-card reaches 404px wide again.

At 420px

At 421px

Steps to reproduce

1. Put a vaadin-notification element in the page, on a non-stretch position;
2. Set opened to true;
3. Visit the page a try different screen resolutions with varying widths.

[jouni]

Personally, I have a slight dislike for the current behavior as well.

The current design ensures that notifications never overlap, even when placed in different positions (for example top-start and top-center).

I wonder, is that a real requirement? Could we assume that application developers take care of not using multiple locations in the first place (to avoid overlaps)? The stretch positions could still force all other notifications out of the way, like currently.