Set maximum width for frontend
matthew-white opened this issue · comments
Right now, Frontend will use the full width of the page. However, after a certain width, that detracts from the user experience. Instead, we want to set a maximum width for Frontend to use. (Let's try 1400px.) The content should be centered on the page.
One caveat has to do with the Submissions and Testing pages. On those pages, we want the submissions table to use nearly the full width of the page. We could set it up so that even while the rest of the page has a max width of 1400px, the table somehow breaks out of the container and uses more width. Or we could set it up so that on the Submissions and Testing pages, Frontend as a whole uses the full width of the page.
Right now we use the Bootstrap full-width container (.container-fluid). However, we could use the Bootstrap responsive fixed-width container instead (.container). Or we could update .container-fluid or write our own container.
One thing that we know will be an issue is elements with position: fixed;. However, those are not common in Frontend. The main example I can think of is FormAttachmentPopups.
Notes for the QA team
See #775 for information about the expected behavior.
Tested with Success!