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

Fix the stat cards layout for smaller screens to maintain equal height #354

Open
Avi-88 opened this issue Feb 12, 2023 · 7 comments
Open

Comments

@Avi-88
Copy link

Avi-88 commented Feb 12, 2023

The stat cards appear clustered and have unequal heights for smaller screen sizes and look a bit cramped

unequalht

By changing the layout from a 4 column to a 2 column one , it fixes the unequal heights issue as well gives it a good spacing

equalht

@mayank190801
Copy link
Contributor

Wouldn't in bigger screens now there will be more white space left? As two rows will be used rather than one?

@Avi-88
Copy link
Author

Avi-88 commented Feb 14, 2023

In bigger screen it still is 4 columns and 1 row, for medium and smaller screen it switches to 2 column layout. It looked really cramped and uneven on smaller screens with 4 columns layout so now for larger screens it will be as it was earlier , just for medium to smaller screens it will switch like above

@mayank190801
Copy link
Contributor

Got it. Thanks!

@llaske
Copy link
Owner

llaske commented Feb 16, 2023

Having equals size could be better but using 2 rows is not a good idea. it wastes a lot of space for the rest.

@Avi-88
Copy link
Author

Avi-88 commented Feb 17, 2023

By rest , do you mean the other visualizations ? As you can see in the attached screenshot it takes almost the same amount of space that it would have taken if it was a single row. If you want I can check for all screen sizes using both layouts, if there's a significant difference we could fall back to making the original layout work with equal heights , please let me know your thoughts on this , thanks

@mayank190801
Copy link
Contributor

I think you can notice the difference in size by comparing the screenshots you have provided.
The first one is approximately 184px of space and the second one takes around 256px.

@Avi-88
Copy link
Author

Avi-88 commented Feb 17, 2023

Ok , I'll try and implement the previous layout with equal heights , thanks for the feedback

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

No branches or pull requests

3 participants