calendar: improve responsiveness

[ArtBlue]

Description

Currently, the multi-month calendar does not have built-in responsive adjustments based on screen size. For this issue, look into creating a responsive mechanism to have the multi-month calendar display properly across all screen sizes.

The easiest solve will likely be displaying a single calendar on smaller screens, but some investigation is necessary to find a good path forward.

Screenshots

Figma link

No response

Engineering pre-requisites

• Supports dark mode.
• Supports responsive design.
• Tokens have been provided (or already exist).

[LuLaValva]

The solution is definitely to only show fewer calendars on smaller screens, but that actually needs to be handled on the JS side because otherwise the labels for the paddles will be wrong (unless they are generic like "next month" and "previous month). Right now our recommended labels are along the lines of "Go to September 2024" and "Go to December 2024", which will not be correct after CSS-based truncation