Improve calendar time gutter sticky positioning and alignment

[2witstudios]

Summary

Enhanced the time gutter in both DayView and WeekView calendar components to be sticky during horizontal scrolling and improved the visual alignment of hour labels.

Key Changes

• Made the time gutter (sticky left-0 bg-background z-10) so it remains visible when scrolling horizontally through calendar events
• Improved hour label positioning by:
  • Changing from -top-2.5 to top-0 -translate-y-1/2 for more precise vertical centering
  • Adding leading-none to prevent line-height from affecting alignment
  • Hiding the "0" hour label (midnight) with hour > 0 conditional to reduce visual clutter
• Applied consistent changes across both DayView and WeekView components

Implementation Details

The time gutter now uses CSS sticky positioning with proper z-index layering to ensure it stays visible during horizontal scrolling while maintaining the calendar's visual hierarchy. The hour label centering uses CSS transforms for more reliable alignment across different browsers and font sizes.

https://claude.ai/code/session_012VnPGU2n6WUM4Z856xxgDU

Summary by CodeRabbit

• Style
  • Calendar day and week views now feature sticky time gutters that remain visible while scrolling through events.
  • Improved hour label positioning and alignment to enhance readability and clarity of time markers in calendar grids.

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

Both DayView and WeekView calendar components receive styling and rendering updates: the left time gutter becomes sticky with proper layering, hourly labels render conditionally starting from hour 1, and vertical centering is adjusted via CSS transforms.

Changes

Cohort / File(s)	Summary
Calendar View Sticky Gutters apps/web/src/components/calendar/DayView.tsx, apps/web/src/components/calendar/WeekView.tsx	Added sticky positioning to left time gutter (sticky left-0 bg-background z-10). Modified hourly label rendering to skip hour 0 and adjusted label positioning with top-0 and -translate-y-1/2 vertical centering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Sticky gutter glues itself with pride,
Scrolling smooth from left to right side,
Hour labels dance with grace so true,
Skipping zero, centering anew! ✨

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: improving sticky positioning and alignment of the calendar time gutter, which is the primary focus of changes to both DayView and WeekView components.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into master

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch claude/fix-calendar-time-alignment-UPSPV

---

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.}