Skip to content

fix: Responsive calendar#9847

Merged
snowystinger merged 15 commits intomainfrom
responsive-calendar
Mar 31, 2026
Merged

fix: Responsive calendar#9847
snowystinger merged 15 commits intomainfrom
responsive-calendar

Conversation

@snowystinger
Copy link
Copy Markdown
Member

@snowystinger snowystinger commented Mar 26, 2026

Closes

Follows the pattern in the starter kits so that when the screen gets smaller, we can still fit the calendar without horizontal scrolling. To an extent. When things get really narrow, since we don't apply scaling down but rather only scaling up, on the prev/next buttons, they will become unaligned, this is expected.

Note, this only applies to a single visible month, if there are more visible months it should behave the same as before. Eventually, we'll determine the number of actual max visible months based on available space, not just the prop.

Important, if you're using Chrome dev tools to dynamic responsive resize, sometimes it can mess up, either refresh the page, or toggle the responsive mode off and on again, or do both things, see if it works then.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Go to Calendar/RangeCalendar/DatePicker/DateRangePicker

Make sure they look good (unchanged) at desktop size. Visit on mobile, the cells may be a little smaller so that the entire calendar can fit in the viewport.

This only affects single month views.

Important, if you're using Chrome dev tools to dynamic responsive resize, sometimes it can mess up, either refresh the page, or toggle the responsive mode off and on again, or do both things, see if it works then.

🧢 Your Project:

@github-actions github-actions bot added the S2 label Mar 26, 2026
@snowystinger snowystinger marked this pull request as ready for review March 28, 2026 03:02
# Conflicts:
#	packages/@react-spectrum/s2/src/RangeCalendar.tsx
@rspbot
Copy link
Copy Markdown

rspbot commented Mar 28, 2026

@rspbot
Copy link
Copy Markdown

rspbot commented Mar 28, 2026

@snowystinger
Copy link
Copy Markdown
Member Author

snowystinger commented Mar 30, 2026

Thanks. I have to ask, this review(?) sounds like it was generated by an AI and isn't really contributing anything from what I can tell. Is there a reason you wanted it added to this? Same thing over on #9818 (review) and #9853 (review) and #9833 (review) and #9819 (review)

This comment is no longer relevant, all comments it cited have apparently been deleted

@yihuiliao
Copy link
Copy Markdown
Member

yihuiliao commented Mar 31, 2026

mind adding some testing instructions? helpful when it comes to the testing sheet

@snowystinger snowystinger added this pull request to the merge queue Mar 31, 2026
Merged via the queue into main with commit 144befe Mar 31, 2026
34 checks passed
@snowystinger snowystinger deleted the responsive-calendar branch March 31, 2026 23:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants