Remove scroll from whole app to individual scrollable components

[nabramow]

We have scroll set to the whole app rather than just in the scrollable components. This means even the nav bar scrolls, which is not what we want.

See what I mean on desktop here:

On mobile here:

We should add overflow: "hidden" to the global html and body css in AppRoute.tsx` like this:

  "@global html": {
    scrollPaddingTop: `calc(${theme.shape.navPaddingXs} + ${theme.spacing(2)})`,
    height: "100%",
    overflow: "hidden" // here
  },
  [theme.breakpoints.up("sm")]: {
    "@global html": {
      scrollPaddingTop: `calc(${theme.shape.navPaddingSmUp} + ${theme.spacing(
        2
      overflow: "hidden" // here
      )})`,
    },
  },
  "@global body": {
    height: "100%",
    overflow: "hidden" // here
  },

Right now that breaks the scroll in other places, so the main part of this ticket will be adding the overflow: "auto" to the specific components that should have it (below the nav bar) after making this change. For example the dashboard landing page no longer scrolls.

Make sure to check mobile and desktop.

[bakeiro]

I think this can be done in the Next.js config... it's what I did on the map, maybe makes sense to always use the same solution for the problem? (instead of multiple solutions for the same problem)

[bakeiro]

@nabramow

you can check here :)
https://github.com/Couchers-org/couchers/blob/develop/app/web/pages/search.tsx#L34

[nabramow]

@nabramow

you can check here :) https://github.com/Couchers-org/couchers/blob/develop/app/web/pages/search.tsx#L34

Good point, I found the `variant: "full-width" after I wrote this. We should def see if there are other pages that should have this though still I think!

The messages one will be done in #5055.