Improve settings layout

[Zasa-san]

(This issue is to document a spike to refactor the settings main layout)

Currently, in the new settings UI, most of the pages have a footer with actions buttons.

This footer needs to remain always visible while the contents scroll if necessary. To achieve this we made the footer fixed to the bottom, and added a padding to the content to avoid it being covered by the footer.

This is the wrong approach but the only one we could achieve since we need to insert this UI in the context of the V1 settings route. It also causes responsible issues on mobile for the V2 settings screens.

A better approach would be to make the whole settings layout like this:

By nesting two flex or grid containers like this we can get the desired behavior of having independent scrolling in the content (with footer and header always visible), and scrolling in the side menu if necessary. This is also completely responsive.

The current hurdle to do this is that we need to refactor the parent element of all these routes, app/react/Settings/Settings.js. This breaks V1 setting pages, and the sidebar menu. The amount of work necessary to make V1 setting pages in this new layout is almost as much as rewriting them, since we are almost halfway there.

[cxx5208]

Could you please assign this to me. I would like to work and improve the styling

[Zasa-san]

Could you please assign this to me. I would like to work and improve the styling

Hey @cxx5208 ! Thanks for your interest in our project!

This issue is not ready to be developed. You can certainly create a branch and develop a solution for practice, but It wouldn't be merged.

You can find other issues with the Frontend tag if you are interested in working with styles.