Made the calendar page mobile-responsive

[devlarabar]

Description

The calendar page is now mobile-responsive; the issue before this change was that the calendar header was too wide, and was not resizing properly when the screen size changed. Using only Tailwind CSS, this has been fixed. Please see the screenshots below for examples of what the header now looks like at different breakpoints!

Type of change

Please select everything applicable. Please, do not delete any lines.

• [X] Bug fix (non-breaking change which fixes an issue)
• [ ] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update
• [ ] This change requires an update to testing

Issue

• [X] Is this related to a specific issue? If so, please specify: #449

Checklist:

• [X] This PR is up to date with the main branch, and merge conflicts have been resolved
• [X] I have executed npm run test and all tests have passed successfully or I have included details within my PR on the failure.
• [X] I have executed npm run lint and resolved any outstanding errors. Most issues can be solved by executing npm run format
• [X] My code follows the style guidelines of this project
• [X] I have performed a self-review of my own code
• [X] I have commented my code, particularly in hard-to-understand areas
• [X] My changes generate no new warnings

[cblanken]

This looks great. I like the more compact header for mobile.

One thing I did notice is that the EventModal popup is pretty cramped when in mobile dimensions.

We probably want to make it fullscreen once we get to smaller form factors like this

Looking at the code though it looks like it gets kinda messy. We'll need to rework the styles in UserForm.js, EventModal.jsx, CalendarPage.js and Backdrop.jsx so I don't know if we'd want to include that in this PR as part of the calendar page or just make a separate issue for the modals.

@Caleb-Cohen thoughts?

[Caleb-Cohen]

This looks great. I like the more compact header for mobile.

One thing I did notice is that the EventModal popup is pretty cramped when in mobile dimensions.

We probably want to make it fullscreen once we get to smaller form factors like this

Looking at the code though it looks like it gets kinda messy. We'll need to rework the styles in UserForm.js, EventModal.jsx, CalendarPage.js and Backdrop.jsx so I don't know if we'd want to include that in this PR as part of the calendar page or just make a separate issue for the modals.

@Caleb-Cohen thoughts?

While I agree it could really benefit from some style love, I think this is out of scope for what @devlarabar originally signed up for and what I approved.

[cblanken]

While I agree it could really benefit from some style love, I think this is out of scope for what @devlarabar originally signed up for and what I approved.

Fair enough. I'll write up a separate issue to address the mobile-responsive styling for the modals.

[Caleb-Cohen]

While I agree it could really benefit from some style love, I think this is out of scope for what @devlarabar originally signed up for and what I approved.

Fair enough. I'll write up a separate issue to address the mobile-responsive styling for the modals.

Agreed. Will you be at standup on Tuesday to discuss this as well?

[cblanken]

Yep I'll be there 👍