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

[ajhollid]

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

Expected:

Actual:

[gorkem-bwl]

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

[Br0wnHammer]

@gorkem-bwl can I take this on?

[FlowerC9]

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

[gorkem-bwl]

@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]

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

[ajhollid]

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

Are you able to check at that resolution?

[FlowerC9]

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]

Sure, thanks for noting down.

[Owaiseimdad]

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

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

[gorkem-bwl]

You should be good to go @Owaiseimdad !

[Owaiseimdad]

@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]

@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]

@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,

[gorkem-bwl]

@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]

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.

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.

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

[gorkem-bwl]

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]

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

[gorkem-bwl]

Perfect, thanks.