fix: issue where days of week in calendar are misaligned when month s…

[joshunrau]

The calendar uses a 7-column grid where each day of the week gets a column (Sunday through Saturday). Before rendering the day numbers, an empty spacer element is inserted to push the 1st of the month into the correct column. For example, if a month starts on Thursday, the spacer spans 4 columns so that "1" appears under "Thu".

The bug: when a month starts on Sunday, no offset is needed — the 1st should go in the very first column. The code set the spacer to span 0 columns, but that's not valid, so the browser treated the spacer as a regular element taking up 1 column. This pushed every day one position to the right, making Sunday dates appear under Monday, Monday under Tuesday, etc.

The fix skips rendering the spacer entirely when the month starts on Sunday.

Summary by CodeRabbit

• Bug Fixes
  • Fixed calendar grid layout spacing to eliminate unnecessary gaps in the date display.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 94269942-ff87-478f-9e32-ac9c19898cf9

📥 Commits

Reviewing files that changed from the base of the PR and between 75843fd and 50c4c34.

📒 Files selected for processing (1)

• src/components/DatePicker/Calendar.tsx

---

Walkthrough

The Calendar component's spacer div for grid alignment is now conditionally rendered, appearing only when the firstDay offset exceeds zero. This optimizes the DOM structure while preserving calendar functionality.

Changes

Cohort / File(s)	Summary
Calendar Spacer Optimization src/components/DatePicker/Calendar.tsx	Converted unconditional spacer div to conditional rendering based on firstDay offset value, reducing unnecessary DOM nodes when no offset is needed.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

A spacer once rendered without care,
Now only appears when offset's there—
Grid alignment grows more refined,
The DOM thanks this tidier mind. ✨

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch date-picker-ui-issue

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🎉 This PR is included in version 6.2.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀