"Containers confirm navigation" page is unusable if URL is too long

[dholbert]

STR:

1. Open a new container tab (using "Work", for example)
2. Visit http://example.org in that tab
3. Right-click the page and choose "Always open in this container". (You might have to reload before this option is available.)
4. Open a new normal (non-container) tab.
5. In that new tab, visit an extremely-long example.org URL, like this one

EXPECTED RESULTS: Usable "should we open this in your container" interstitial page
ACTUAL RESULTS: The interstitial page's content is mostly pushed offscreen to the left (and is unscrollable), because its <main> element is centered in the viewport and is extremely wide due to displaying the long URL.

Here's a screenshot:

[dholbert]

I encountered this in the wild (i.e. it's not a theoretical problem), after I opted-in mozilla.okta.com to always load in the "work" container. I then visited phonebook.mozilla.com and got a page that looks basically like my initial screenshot here, because phonebook redirects to an extremely long okta URL.

[dholbert]

One possible solution here: add word-break: break-all; to the #redirect-url div here. That would allow the URL to be line-wrapped at any arbitrary point, rather than only allowing itself to be wrapped at special characters. (I tested this locally in devtools, and it fixes the issue for me.)

[jonathanKingston]

Thanks @dholbert will add for the next release!