Control Panel UI doesn't take up full width

[krsilas]

Bug Description

The unopened popover is occupying additional width on mobile, even though the x-position is transformed. Control panel UI is not 100% wide.

How to Reproduce

Open the CP on mobile. Reload a few times if issue is not showing up.

Extra Detail

This issue is caused by popperjs. I assume there is a conflict because of the default CSS and the inline styles that are applied after the component is mounted.

Environment

Statamic version: 3.0.15
PHP version: 7.4
Chrome: 86 (desktop and mobile)

Fresh install from statamic/statamic

[leganz]

It might be resolved if you add overflow:hidden to #statamic ... at least on my local installation this resolved the problem, cause popper.js placed the div correctly....

but it's seems to be resolved by #2622

[krsilas]

@leganz This does work, but there are other overflow issues where that would be unfavorable:

[jasonvarga]

Is there a consistent way to see this behavior?

[johncarter-]

I was just playing around with a 3.0.16 install and I can confirm this happens when you have a long, non-spaced title. It seems like the collection view h1 needs a class="truncate" and to wrap the actions under/above the h1 on smaller screens.

[krsilas]

Is there a consistent way to see this behavior?

The behavior of the original issue shows up consistently for me. Not on the first load, but as soon as I click around. I've tried it locally, on the server, with a fresh statamic installation and different browsers/devices. I wasn't able to reproduce the issue in Safari (Desktop) and Firefox (Desktop), though. Resizing the window also fixes the layout on certain breakpoints.
So it's probably related to the time the JavaScript is executed.

[krsilas]

Popperjs recently fixed a few issues that could be related to this:
floating-ui/floating-ui#1166
floating-ui/floating-ui#1141

[jasonvarga]

I've merged the PR that upgrades popper. I don't think it fixes this issue but I'm happy to be wrong.

Looks like we need to do some responsive UI work in general.