Notifications may not fit the mobile screen

[Yngwarr]

That's what I'm talking about.

[local-minimum]

Yes, this is known. Someone with more CSS skills than me need to look into that.

[Yngwarr]

Huh! Actually, I can do it. =)

[crs38c28]

It's in here

	& .-items {
		width: 480px;
		max-width: 480px !important;
		right: 0px;
		top: 55px;
		background: @COL_W !important;

change width can solve this problem.

maybe use width: calc(100vw - 2em - 48px); can fix this?

But it seems like calc() in LESS ( < 3.0) is different...

=> [more information] , [more information]

[Josh6680]

I had a different approach to this where the position becomes "relative" to the top-right corner below the top bar, and 100% wide for screens that are smaller than the max-width.

--- a/src/com/view/bar/bar-notifications.less
+++ b/src/com/view/bar/bar-notifications.less

        margin: 0px !important;

        & .-items {
-               width: 480px;
+               width: 100%;
                max-width: 480px !important;
                right: 0px;
-               top: 55px;
+               top: 64px;
                background: @COL_W !important;
+               position: fixed;

                & .-item {
                        padding: 0px !important;

Here's a GIF of this while resizing the screen using Firefox devtools:
https://user-images.githubusercontent.com/1106285/40889543-6158b3ba-6736-11e8-8070-c43b494d29a1.gif

[local-minimum]

I'm fine with either just as long as we get one in.

[mikekasprzak]

Opened a new issues (#1684) for the lesscss upgrade. There was a bug in lesscss that was holding us back, but it might be fixed now.

[mikekasprzak]

I'm re-opening the issue (even though it's resolved) for later when future me gets a chance to look at the notes above. We have a long list of mobile screen fitting issues, and I want to understand some of the proposed fixes if they can be used to resolve some of the other related issues.

[local-minimum]

changed tags so it is clear that this isn't as important anymore.