Make Admin Panel Responsive

[C-W-D-Harshit]

Description:
The current admin panel is only optimized for PC and lacks responsiveness on mobile and tablet devices. This issue focuses on implementing a responsive design using Tailwind CSS to ensure a seamless user experience across all screen sizes.

Tasks:

• Analyze the current layout of the admin panel and identify elements that need adjustments for smaller screens.
• Apply Tailwind responsive utilities to adjust layout, font sizes, and element positioning.
  • Use Tailwind’s sm, md, lg, xl, and 2xl breakpoints to create a mobile-first responsive design.
• Optimize navigation for mobile and tablet views:
  • Implement collapsible sidebars, simplified menus, or hamburger icons where needed using Tailwind's hidden, block, and flex utilities.
• Test across multiple screen sizes (e.g., mobile, tablet, and desktop) to ensure consistent performance and usability.
• Review and optimize any custom components to ensure they adapt well with Tailwind's responsive classes.

Expected Outcome:
A fully responsive admin panel that provides a user-friendly interface on all devices, including mobile, tablet, and desktop.

Additional Notes:
Consider using Tailwind’s space-x, space-y, p, and m utilities to control spacing effectively across different screen sizes.