feat: One row calendar top bar on small screens

[IsaacNguyen]

Summary

Changed the "FINALS" button to become a smaller icon on smaller screens, preventing it from becoming two rows.

BEFORE:

AFTER:

• When the icon is not pressed

• When the icon IS pressed

Test Plan

• Ensure works properly on all kinds of small devices

Issues

• I make it become an icon at around a 400px width, but it still becomes two rows for very very small screens. But I doubt there are even screens this tiny. If there are, I can change it further.
  • 
• Could change the icon but I felt like this one was suiting.

Closes #1026

[KevinWu098]

Thanks for working on this PR Isaac! Very happy that we're address this area of the UI.

I've left some comments regarding some code consistency and visual clarity 🫡

[MinhxNguyen7]

Border not visible in light mode