Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set maximum width for frontend #447

Closed
matthew-white opened this issue Apr 30, 2021 · 1 comment · Fixed by #775
Closed

Set maximum width for frontend #447

matthew-white opened this issue Apr 30, 2021 · 1 comment · Fixed by #775
Assignees
Labels
behavior verified Behavior has been manually verified enhancement New feature or behavior styles Changes to CSS

Comments

@matthew-white
Copy link
Member

matthew-white commented Apr 30, 2021

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.

@matthew-white matthew-white added enhancement New feature or behavior styles Changes to CSS labels May 30, 2022
@matthew-white matthew-white changed the title Set maximum width on container Set maximum width for frontend May 30, 2022
@matthew-white matthew-white added this to the v2023.1 milestone Nov 16, 2022
@matthew-white matthew-white modified the milestones: v2023.1, v2023.2 Nov 22, 2022
@matthew-white matthew-white removed this from the v2023.2 milestone Jan 3, 2023
@matthew-white matthew-white self-assigned this Jan 13, 2023
@matthew-white matthew-white added needs testing Needs manual testing needs design review Needs verification from designer labels Mar 25, 2023
matthew-white added a commit that referenced this issue Mar 27, 2023
matthew-white added a commit that referenced this issue Apr 10, 2023
@matthew-white matthew-white linked a pull request Apr 10, 2023 that will close this issue
2 tasks
@matthew-white matthew-white removed the needs design review Needs verification from designer label May 24, 2023
matthew-white added a commit that referenced this issue May 25, 2023
Closes #447.

Also moving the variables for Bootstrap breakpoints to the main section of
_variables.scss.
@srujner
Copy link

srujner commented May 26, 2023

Tested with Success!

@srujner srujner added behavior verified Behavior has been manually verified and removed needs testing Needs manual testing labels May 26, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
behavior verified Behavior has been manually verified enhancement New feature or behavior styles Changes to CSS
Projects
Status: ✅ done
2 participants