Read about changes required to make UI responsive

[surchs]

The goal is to find tools/ways/best practices to modify the existing UI so that elements are reasonably spaced and do not overlap when screen size changes.

A good starting point for research would be to take a look at the material design docs on responsive layout: https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

• [ ] summarize strategies for responsiveness
• [ ] update https://github.com/neurobagel/query-tool/issues/122 with proposed changes
• [ ] (optional) add interesting learnings in appropriate section of https://github.com/neurobagel/dev-docs

[rmanaem]

A good starting point for research would be to take a look at the material design docs on responsive layout: https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

This unfortunately wasn't practical as it essentially documented how material design approaches responsive layout grid as opposed to how a developer can use existing properties, components, and classes to implement a responsive UI.

[surchs]

@rmanaem can you say why it wasn't practical, so we don't try it again next time just to learn the same thing twice

[surchs]

I also think it'd be good to expand the issue description to list some questions / things you have/will review here and what behaviour we want solutions for. The list in #122 should be a good source of things to get answers for

[rmanaem]

I also think it'd be good to expand the issue description to list some questions / things you have/will review here and what behaviour we want solutions for. The list in #122 should be a good source of things to get answers

Yea, let's use the list in the parent issue as the source and not duplicate it here.