Basic responsiveness refactoring

[Paxxack]

In several files and components throughout the app, we have mistakenly specified sizes in pixels, which has compromised the app's responsiveness. While we plan to conduct a more thorough review later to adapt our application for mobile devices, we should first address basic screen sizes.

For example, the current size settings in the root layout are:

    sx={{
      display: "flex",
      backgroundColor: "white",
      height: "100vh",
      maxWidth: "1600px",
      minWidth: "1600px",
      pt: 16,
      pb: 12,
      gap: 16,
    }}

This can be adjusted to:

    sx={{
      display: "flex",
      backgroundColor: "white",
      height: "100vh",
      width: "100%", // Allows the container to take full width
      maxWidth: "1600px", // Optional: Set a max width for larger screens
      pt: { xs: 4, sm: 8, md: 16 }, // Responsive padding based on screen size
      pb: { xs: 4, sm: 8, md: 12 }, // Responsive padding based on screen size
      gap: { xs: 2, sm: 4, md: 16 }, // Responsive gap between elements
    }}

This adjustment is not a final solution, but rather a starting point for handling responsiveness in MUI. By defining multiple sizes based on screen dimensions, MUI can automatically adapt to various devices.

Task here is to go over all the app that we currently have and change those so we have our basic responsiveness behavior back.