Skip to content

Improve styling of dialogs to avoid unwanted layout shift when scaling up the application #1309

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

Closed
AlbyIanna opened this issue Aug 9, 2022 · 2 comments · Fixed by #1311
Closed
Assignees
Labels
conclusion: resolved Issue was resolved criticality: medium Of moderate impact priority: medium Resolution is a medium priority topic: accessibility Enabling the use of the software by everyone topic: code Related to content of the project itself type: imperfection Perceived defect in any part of project

Comments

@AlbyIanna
Copy link
Contributor

We've noted that the layouts of some dialogs in the IDE2 become distorted (with buttons going offscreen), when scaling up the application.

We should add css rules to ensure dialog layout shifts that impair usability do not occur on scaling up the app. Generally speaking our dialogs should have a fixed header and footer, content between should not overflow and push things out of view.

We should review all dialogs at different scales in the IDE2, we can group simpler dialogs that share rules into single PR, and use separate PRs for more complex dialogs (like the board / port selector).

Example of distorted board selector dialog when app is scaled up and the window width is reduced:
Screenshot 2022-07-28 at 12.45.47.png

@AlbyIanna AlbyIanna added criticality: medium Of moderate impact priority: medium Resolution is a medium priority topic: accessibility Enabling the use of the software by everyone topic: code Related to content of the project itself type: imperfection Perceived defect in any part of project labels Aug 9, 2022
@AlbyIanna AlbyIanna self-assigned this Aug 9, 2022
@InstantMuffin
Copy link
Contributor

InstantMuffin commented Aug 9, 2022

If this is not related, I'd like to open another issue specifically for this, but I have noticed throughout the release candidates that when you maximize the main window before it is fully loaded, the entire window content will be drawn using the initial dimensions using startup, leaving the rest blank.

Now as I am typing this and want to reproduce this, I just cannot do that successfully. I am using cdeb502. Maybe it was related to the deprecated themes. In case anyone else knows about this (this being caused by the themes or experiencing the issue), please leave a comment. Otherwise I guess this particular thing is just fixed.

@per1234
Copy link
Contributor

per1234 commented Aug 10, 2022

@InstantMuffin that bug is being tracked here: #1244

A fix was made for it in #1255, before which I believe it was easier to reproduce. I produced it by chance yesterday, so I know it is still possible, but I did not reproduce it after that so I think either the time window for making the resize is very specific or else there are additional undetermined required conditions.

If you encounter it again, and especially if you find a way to reproduce it reliably, please comment on #1244

@per1234 per1234 added the conclusion: resolved Issue was resolved label Aug 18, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
conclusion: resolved Issue was resolved criticality: medium Of moderate impact priority: medium Resolution is a medium priority topic: accessibility Enabling the use of the software by everyone topic: code Related to content of the project itself type: imperfection Perceived defect in any part of project
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants