fix: consistent max width and padding in settings #3232
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Currently, each settings page has different maximum width and alignment. This fix makes them all consistent: full width on smaller screens, and when the width gets over 905px (*) they are centred. Had to fix the proxy page a little b/c it was using block elements that don't expand correctly. (*) Why 905px? This is the current sweet-spot where the Settings > Resources page just has three columns. The built-in sizes don't quite work: max-w-screen-md is too narrow and a couple pages like resources look squished; max-w-screen-lg is really wide and simpler pages like proxy and preferences are stretched. Fixes containers#3230. Signed-off-by: Tim deBoer <git@tdeboer.ca>
deboer-tim
requested review from
jeffmaury and
cdrage
and removed request for
a team
benoitf
approved these changes
Jul 14, 2023
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What does this PR do?
Currently, each settings page has different maximum width and alignment. Most page are always full width; proxy/registry are centred after a max width; auth is left justified after a max width.
This fix makes them all consistent: full width on smaller screens, and when the width gets over 905px (*) they are centred.
Had to fix the proxy page a little b/c it was using block elements that don't expand correctly.
(*) Why 905px? This is the current sweet-spot where the Settings > Resources page just has three columns. The built-in sizes don't quite work: max-w-screen-md is too narrow and a couple pages like resources look squished; max-w-screen-lg is really wide and simpler pages like proxy and preferences are stretched.
Screenshot/screencast of this PR
Before:
https://github.com/containers/podman-desktop/assets/19958075/892470f2-048d-469c-b458-0fbcf4b9d605
After:
https://github.com/containers/podman-desktop/assets/19958075/1d1810a6-38a1-4c6b-a4ed-1fd8f44830d0
What issues does this PR fix or reference?
Fixes #3230.
How to test this PR?
Go to each Settings page with a small width, then make your window really wide and go to each page again.