Set max-width for Research module

[davehakkens]

Problem.
The max-width for the research module is currently set to 1280px. This is to wide on large screens.

Solution
The max -width of the main container on the research page should be set to 1000px instead of 1280px.

🔥 Bonus round
While you are at it. it would be great to also set a max-width 1000px for the profile pages

[chrismclarke]

I think the widths generally are a bit confusing/messy, some things are defined with variables and others are just hardcoded. E.g.

src/themes/styled.theme.tsx

Defines breakpoints (based on a font size, assuming standard font size is 16px - not sure if this is the best way to go about things or not) which is used mostly for header, howto and user page (resizing background image etc).

It also has the maxContainerWidth which is used for all pages (unless they specify opting out, e.g. map page which we want full screen), which is what sets the limit for the research and profile page (so just a 1-line change to fix this issue)

But there's also quite a few hardcoded exceptions if you search for maxWidth (hardcoded directly in react)

Or if you search for max-width (hardcoded in css/styled-components)

I'm guessing for the research module we can just change the maxContainerWidth to 1000px as suggested, but if anyone also has any suggestions to make things a little tidier throughout that would be a major bonus too. I don't think we need to change much, I expect the existing breakpoints are kinda ok (?) and most of the hardcoded widths are there for a reason (??) - but maybe we want to add a couple more 'standard' sizes for things like popups and forms?

@davehakkens - do you have any other thoughts on this? happy for maxContainerWidth to drop to 1000px for all pages?

[davehakkens]

Not sure how its structured in code. Kinda weird because in the browser all pages with main containers seem to have a max-width of 1280px. (events, how-to, howto-edit, profile etc) And for most pages 1280px is good so better to not drop it.

So for now I would mainly apply it to
- Research Single (not the Research create/edit or overview pages)
- Profile Pages (not the Profile create/edit page)

[chrismclarke]

All the pages sit inside a Main (main-layout-container) which uses the maxContainerWidth property which is currently set at 1280px.

So in that case I think we just leave the maxContainerWidth as is and make the changes to the individual page components as suggested. Happy if anyone wants to take that on.