I added a general reference for space in the parent task (T119374). That can clarify 1, 2, and 4 (the involved items have 10px margins).

3 can benefit from T125970.
It should be possible to relocate the timestamp for those items tall enough where it fits at the bottom-right area. However, this may also introduce some visual inconsistencies. So I'd like to take a more in depth look at this if we identify that 3+ line items are common inside bundles.

Change 272651 had a related patch set uploaded (by Mooeypoo):
Transform the notification action bar to css table layout

https://gerrit.wikimedia.org/r/272651

The commit above fixes #2 and should also fix #1 (I increased the side padding)

@Pginer-WMF can you clarify #3? Do you mean that the timestamp should just be aligned to the bottom, or that the sentence of the notification should take the entire width of the box, just like a "regular" (non bundle) notification?

In T125909#2053899, @Mooeypoo wrote:

The commit above fixes #2 and should also fix #1 (I increased the side padding)

@Pginer-WMF can you clarify #3? Do you mean that the timestamp should just be aligned to the bottom, or that the sentence of the notification should take the entire width of the box, just like a "regular" (non bundle) notification?

I was referring to align the timestamp to the bottom-right area when the notification message is too long. That is, in cases where the length of the notification message made the notification tall enough for the timestamp to fit there.

I'll try to clarify this with some examples.

With the current approach, the third bundled item is forcing the item to grow while there is additional space available.

What I proposed is to use that space, only when there is enough (note that items 1 or 2 lines long keep the timestamp in the same location as before):

This is probably not worth applying a big effort (since we have plans to reduce the timestamp length anyways in T125970), but if there is some CSS layout strategy that allows to easily achieve it, it may be worth doing.

In T125909#2068334, @Mooeypoo wrote:

This is going to be a mess to implement, honestly, mostly because of the table layout that solves a lot of other issues... I think if we're putting an effort into this, we should concentrate on the timestamp length first and then see if we want to come back to this.

Makes total sense to me.

Change 272651 merged by jenkins-bot:
Transform the notification action bar to css table layout

https://gerrit.wikimedia.org/r/272651

Checked in betalabs.

Below the screenshots for each case (keep in mind that in 99% cases look even better than in the screenshots).

1. X icon is too close

With fixes (including making X icon smaller and truncation corrections), X position looks much more balanced.

The extreme case with a lot of truncation:

cross-wiki notification:

2. Truncated first line of text excerpt and truncated long page names run close to the right edge of Notification panel.

Long page names and text excerpt are placed at the proper distance from the edge. {
The screenshot shows A new topic with a long name is created in the Wikipedia talk namespace (in cawiki) on page with a long name by a user with a long name

Just more samples with truncation:

Below the screenshot from the previous comment - here it illustrates a different point: truncated text excerpt does not run too close to the right edge. Previously, the distance was about 30px, now with even some extreme cases it is >32px

3. cross-wiki multi-line notifications have timestamps placed at the top - at the end of the first line.

The screenshots show Messages and Alerts in cross-wiki notifications - the distance between the end of the first line and the timestamp is sufficient.

4. As a consequence of the #3, the first line of cross-wiki multi-line notifications runs sometime too close to the timestamp - esp in Thanks notificaitons.

cross-wiki Thank notifications

cross-wiki Mention notification: