Fix/style/layout responsiveness/set up

[francelu]

Set Up Responsive Dimensions and Typography for All Screens

Description

This PR establishes a foundation for responsive design by setting up scalable dimensions and typography that adapt to different screen sizes. This setup allows screens to adjust automatically, ensuring consistency across devices. Subtask from #82.

Changes

• Defined responsive dimensions and typography settings.
• Established scalable padding, font sizes, and layout parameters according to screen size for use across all screens.

Files

Added

• To be determined.

Dependencies Added

• androidx.compose.material3:material3-window-size-class:1.3.0 for window size class handling to support responsive layouts.

Testing

• Verified that dimensions and typography scale correctly across various screen sizes without issues on existing screens.

Screenshots (if applicable)

Include examples of the scalable elements in action if needed.

[charliemangano]

Summary

Nice work on this! I tested it on my own device (pup-up window to resize) and it works seamlessly on most window sizes, with some exceptions.
I noticed you used LazyColumns instead of normal Columns, more on this in code comment.

Important

Code Quality

The code is generally unchanged, with modifications made to the padding values and Column changes to LazyColumn. Out of the scope of this issue but we'll need to clean it up a bit.

I believe padding management should be relegated to the Theme.kt, where you put default values for XS to XL-size padding and apply them everywhere. This 9min video explains it pretty well, but sadly it does not go Jetpack Compose into implementation detail.
This would make it easier to standardize across screens as well, so I think any work you'd put into it now is time gained later on.

Functionality

Because the emulator doesn't work on my device, I ran the app directly on my phone and used the pop-up and split-screen view to try and resize it. It works very well on all full-width sized windows (where it touches both left and right borders), but when resizing it with small width, the layout is still shaky:
At ~3/4 of normal width:

At ~1/2 of normal witdh:

For reference, my device screen size is a Samsung A32 (size: 6.4 inches, resolution: 1080 x 2400 pixels, ratio: 20:9).

Testing

All UI tests still pass

Documentation

Not applicable (not the scope of this issue but will need reworking)

Suggestions

I believe either setting a minimum width for the app or having dynamically resized text would solve the layout issue with small widths, but I have not done any further research on the subject.

Steps before PR approved

• Fix layout with small widths
• Standardize padding using Theme.kt

[charliemangano]

Why use LazyColumns and not just use Modifier.verticalScroll(rememberScrollState()) instead?
From what I understand, LazyColumns are most useful when there are a lot of elements on the page and we don't want to load all of them if they're not displayed.

[francelu]

@charliemangano
I've found a great video "The Ultimate guide to supporting all screen sizes in Jetpack Compose using Material 3 design" on YouTube.
However, then I would have to also change all the typography. We should choose a font too.

[charliemangano]

@francelu there is already a default font defined in Type.kt. I believe we can use that one until we work on a more precise theme