Show more monitors in CNS on very large displays

[rithviknishad]

Describe the bug
When CNS is opened in large 4K displays, 75% of the screen space is wasted.

To Reproduce
Steps to reproduce the behavior:

1. Visit https://care.ohc.network/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/cns on a 4K display

Expected behavior
On large displays, render more vitals monitors into view per page.

Screenshots

[kshitijv256]

9 monitors if available should be fine in this size screen i guess
or maybe increase the size of monitors to use most of screen with same no. as it is

I would like to work on it.

[github-actions]

Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, @aparnacoronasafe, This issue has been automatically marked as stale because it has not had any recent activity.

[ayush-seth]

I can pick this up if still required

[MjStar24]

hey @nihal467 I would like to work on this can you assign this to me

[MjStar24]

hey @rithviknishad when I am clicking on the above it is showing no data found

[rithviknishad]

Try logging in as devdistrictadmin Coronasafe@123 instead.

[MjStar24]

thanks @rithviknishad its working!

[MjStar24]

hey @rithviknishad I have raised the pull request for this issue

what I have done :

-by default 6 monitors will displayed per view page for small screens
-for large screens 9 monitors will be displayed per view page for 4k displays
-for this I have used window.resize and react hooks to check the display size and change number of monitors according to display size

[nihal467]

@MjStar24 Unassigning you from this issue due to inactivity. Feel free to reassign yourself if you are still working on it.

[i0am0arunava]

@Nihal @rithviknishad ,I would like to work on this ,can you please assign it to me?

[i0am0arunava]

@rithviknishad , https://deploy-preview-6396--care-net.netlify.app/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/cns](https://deploy-preview-6396--care-net.netlify.app/facility/0c95c7f0-e1d2-4aff-83fa-933cef60d3a8/cns) is not working provide from where have you taken this scrrenshoot ? can I find it here https://care.ohc.network/users/add

[rithviknishad]

#6503 (comment)

[i0am0arunava]

@rithviknishad ,after login with this devdistrictadmin Coronasafe@123 help?

[rithviknishad]

Read steps to reproduce mentioned in issue; the link with that credentials should show monitors.

[i0am0arunava]

@rithviknishad ,is this issue solved already?

[rithviknishad]

as you can see in the screenshot even you've attached, there's a lot of blank space. let's increase the grid columns to whichever fits and increase the number of monitors per page for 4k displays

[rithviknishad]

@i0am0arunava any updates on this?

[i0am0arunava]

@i0am0arunava any updates on this?

Working

[i0am0arunava]

@rithviknishad ,raised a pr please check ,#9013