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

FE - Status Page graph not displaying well on high resolution screens #1729

Closed
ajhollid opened this issue Feb 9, 2025 · 18 comments
Closed
Assignees
Labels

Comments

@ajhollid
Copy link
Collaborator

ajhollid commented Feb 9, 2025

On the status page graph bars do not have consistent gap spacing, which leads to issues on high resolution screens:

Expected:
Image

Actual:
Image

@gorkem-bwl gorkem-bwl added good first issue Good for newcomers frontend labels Feb 9, 2025
@gorkem-bwl gorkem-bwl added this to the 2.1 milestone Feb 9, 2025
@gorkem-bwl
Copy link
Contributor

If anyone would like to work on this, I'd be happy to provide some additional (minor) fix requests for the status page.

@Br0wnHammer
Copy link
Contributor

@gorkem-bwl can I take this on?

@FlowerC9
Copy link
Contributor

FlowerC9 commented Feb 22, 2025

i can fix this could you please assign this to me @ajhollid , @gorkem-bwl ?

@gorkem-bwl
Copy link
Contributor

@FlowerC9 currently I don't have a design for this as we're quite focused on the release issues. Do you have something in mind?

@FlowerC9
Copy link
Contributor

can you @ajhollid please tell the steps to recreate this i have tried but it seems bar graphs is fine?

@ajhollid
Copy link
Collaborator Author

@ajhollid Hi @FlowerC9 , I noticed the issue while viewing at 4k resolution.

Are you able to check at that resolution?

@FlowerC9
Copy link
Contributor

i not able to check in 4k @ajhollid .can you @gorkem-bwl please unassign me from this issue since i don't have any 4k medium so i'm not able to check is it fixed or not.

@gorkem-bwl
Copy link
Contributor

Sure, thanks for noting down.

@Owaiseimdad
Copy link
Contributor

@gorkem-bwl , I think I have resolution settings on my mac.

Image

Assign me this if I am not wrong.
@ajhollid .

@gorkem-bwl
Copy link
Contributor

You should be good to go @Owaiseimdad !

@Owaiseimdad
Copy link
Contributor

Owaiseimdad commented Feb 27, 2025

@ajhollid possible to help me in setup for checkmate?
I am following, https://docs.checkmate.so/users-guide/quickstart but to be honest very confusing.

-> When you tell Change directory to the Docker/dev directory which directory are you trying to change?
-> After I cloned the repo, I did not find any build_images.sh file?

I some how understood something so started with https://docs.checkmate.so/users-guide/quickstart#manual-install

Also, I don’t see any server-client repo at all. What am I missing here?

Also, as I am working on frontend, was thinking of manual installation in frontend and backend will be on docker. Please help me here also, if there is any other chat available to have a quick huddle let me know.

@gorkem-bwl
Copy link
Contributor

@Owaiseimdad you are right - we are planning to write that section from scratch to eliminate any confusion.

Also, I don’t see any server-client repo at all. What am I missing here?

Checkmate backend: https://github.com/bluewave-labs/checkmate-backend
Checkmate frontend: https://github.com/bluewave-labs/checkmate

Also, as I am working on frontend, was thinking of manual installation in frontend and backend will be on docker. Please help me here also, if there is any other chat available to have a quick huddle let me know.

You can use our Discord channel for this.

@Owaiseimdad
Copy link
Contributor

@gorkem-bwl , looks like my current mac has only 3360x2100 which is not 4K but close to it. I do have a monitor will try to see I f I can reproduce in it as I am not able to reproduce it the above resolution I have.
Current once shows like this,

Image

@gorkem-bwl
Copy link
Contributor

@Owaiseimdad this one happens with the status page in fact. You'd need to run the latest code and create a status page first, and then go from there. Can yo do it?

@Owaiseimdad
Copy link
Contributor

Yes @gorkem-bwl , you are right.

Analysis: The issue is with respect to the code used for width calc(30vw / 25) is problematic because vw(viewport width) scales with screen size and division with 25 might not give expected results on high resolutions.

Changing it to rem does resolve the issue but I see if I zoom in with the vw or rem the issue remains the same.

Image

Added margin-left to avoid anything in future also, there are two boxes so implement a common HOF so that if they are changed then both side are affected.

Image Image

Looking at more possible scenarios which can cause issue, if I find none, will raise a PR.

@gorkem-bwl
Copy link
Contributor

Many thanks digging deep here @Owaiseimdad - that is a good starting point and waiting for your PR for the next release, which is 2.1

@Owaiseimdad
Copy link
Contributor

@gorkem-bwl this has been pushed to development now, we can close this.

@gorkem-bwl
Copy link
Contributor

Perfect, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants