The Responsive Layout of Dashboard Column should be adjust at around 1011px

[YuxinZhang214]

Describe the bug
At a screen width of approximately 793px -1011px, parts of the the dashboard column in the application is hided outside of the screen.

To Reproduce
Steps to reproduce the behaviour:

1. Open the application and navigate to the dashboard.
2. Adjust the browser window size to approximately 1011px width or use device emulation in the browser's developer tools.
3. Observe that the dashboard column layout becomes undesirably small.

Expected behaviour
The layout of the dashboard should be adjusted to show all four sections regardless of the screen size

Actual behaviour
The layout of the dashboard is not showing all four sections at approximately 793px -1011px

Suggested Solution
This issue likely resides in the CSS or UI framework rules governing the dashboard column. The layout might not be adjusting properly at around 793px -1011px screen width. Modifying the responsive design rules should resolve this problem.

Screenshots

Environment

• OS: macOS Ventura 13.2.1
• Browser: Chrome 115.0.5790.114
• Node.js version: v16.17.1

Additional notes
Tool for checking device screen sizes is mydevice.io.