We use viewportSmall in lots of places to decide whether we should render components with a mobile suitable layout or the standard one for desktop browsers. Currently, we only pass mock values in a lot of places.
Correctly decide whether we are on a small viewport or not and either pass this information as prop to all components, create a hook or come up with a different solution (anything except reintroducing redux :D). Make sure the web app looks as before on mobile afterwards.
Steffen Kleinle - 7.6.2021, 16:26:37
We use
viewportSmallin lots of places to decide whether we should render components with a mobile suitable layout or the standard one for desktop browsers. Currently, we only pass mock values in a lot of places.Correctly decide whether we are on a small viewport or not and either pass this information as prop to all components, create a hook or come up with a different solution (anything except reintroducing redux :D). Make sure the web app looks as before on mobile afterwards.
Previously we used https://www.npmjs.com/package/redux-responsive with a break point at 750px width:
viewport: createResponsiveStateReducer({ small: 750 }, { infinity: 'large' }). For reference: https://github.com/Integreat/integreat-app/blob/IGAPP-web-ts-init/web/src/modules/app/createReduxStore.js#L43Environment: - Linked issues: