Mobile + Layout optimization

Overview

Questable has some layout bugs at the moment and is not optimized for mobile usage. We should go through the app and standardize our layout code in a way that is responsive to various screen sizes down to the mobile size, and fix some layout bugs along the way.

Tips: MUI layout tools

MUI layout is handled via Container, Grid, and Stack components. Anyone taking on this deliv should make sure they understand the differences between these components and their usage before starting. If unsure ask me! :)

Bug: Top navbar sits above the scrollable area

Currently, the vertical scrollable area on the app takes up the entire height of the window, and the top navbar for Questable sits above this scrollable area. This causes the scrollbar on the side of the app to pass under the navbar. We should change our navbar positioning so that it takes up a defined section at the top of the window, and the vertical scrollable area only begins under the navbar. Good files to look at are App.tsx and Layout.tsx.

Mobile optimization

You can use Chrome devtools to simulate a mobile screen size. Go through the app's functionality/screens and make sure sizing, layout, and positioning are appropriate on mobile. Using the MUI Grid system with various breakpoints will likely be an important strategy.

hcs-t4sg / questable