Notifications: background bleed on sides of notifications in narrow views

[rickybanister]

There is a gap between the 480 and 660 breakpoint where you can only view the single-column detail view of a notification, but you do not get a shadow to the left of the entire notifications panel. It creates this appearance:

Expected: there should always be a shadow setting notifications off the rest of the page until notifications goes fully full sreen.

cc @drw158

[designsimply]

Closing because I was unable to reproduce the problem using the following testing steps:

1. Start at https://wordpress.com
2. Click the notifications icon in the top toolbar
3. Drag the browser window so the size gets progressively smaller and check to see if the shadow setting apart the notifications panel goes away at any point

Result: the shadow didn't go away (39s)

I tested with Safari 9.1.1, Firefox 47.0.1, and Chrome 51.0.2704.106 on Mac OS X 10.11.5.

[rickybanister]

You're right, something has changed here and the shadow seems to stick around, but I discovered a perhaps worse responsive issue with notifications:

Before the browser reaches the smallest breakpoint, notifications never pop to be full-width, leaving no shadow on the left or right and letting the background bleed through:

[kriskarkoski]

I can still repro the second issues Rick mentioned above. I saw it happen in Chrome on Mac at a browser width of 440 and it looks like it happens at anything above 400px (the smallest I can make Chrome) and the 48-px breakpoint when the masterbar adjusts.

I've updated the title of this issue to be for the later issue we uncovered, but I'm sure it could be tweaked further for more clarity.

[stale]

This issue has been marked as stale because it hasn't been updated in a while. It will be closed in a week.
If you would like it to remain open, can you please you comment below and see what you can do to get things moving with this issue?
Thanks! 🙏

[davewhitley]

There is now a shadow.