Fix dashboard skeleton responsiveness on medium screens and set max-width for the header

[qisforq]

Objective:

Resolve the responsiveness issue on the dashboard layout for medium screens and ensure that the header has a maximum width to prevent overflow.

Sub-tasks:

1. Investigate the dashboard layout on medium screens.

   • [x] Reproduce the issue by viewing the dashboard on a medium screen size
   • [x] Identify the specific components or elements that are overflowing the screen.
   • [x] Take note of the current layout structure and any existing responsive styles.

2. Adjust the dashboard layout for medium screens.

   • [x] Review the dashboard layout component (e.g., src/components/dashboard/DashboardLayout.tsx).
   • [x] Modify the layout styles or CSS classes to ensure proper responsiveness on medium screens.
   • [x] Use appropriate CSS techniques (e.g., media queries, flexbox, grid) to adapt the layout for medium screen sizes.
   • [x] Test the layout on various medium screen sizes to verify that the overflow issue is resolved.

3. Set a max-width for the dashboard header.

   • [x] Identify the header component of the dashboard (e.g., src/components/dashboard/Header.tsx).
   • [x] Add a max-width property to the header component's styles or CSS classes.
   • [x] Determine an appropriate max-width value that prevents the header from overflowing the screen.
   • [x] Test the header on different screen sizes to ensure that it respects the max-width and doesn't cause any layout issues.