Skip to content

Conversation

@annavik
Copy link
Member

@annavik annavik commented Jan 29, 2026

Summary

Comment from @mihow :

If the calendar picker appears above the field, then when you click prev/next the buttons jump up or down based on the length of the month, which makes it very tricky to go back more than a few months. A lot of the data is from 2022 which takes quite a while to get to with this jumper!

In this PR we fix this by updating date picker version and the layout logic. The updated version (see separate PR) will allow year and month to be set from dropdown. This will make it a lot quicker if you want go back far in time. We also force the date picker to go below the trigger, to keep the position stable for navigation buttons. One little drawback is that scrolling will be needed, if there is not enough space below the trigger in the current view, to fit the calendar.

We also discussed setting the date from a text input. I had a quick look and that solution would require a bit more client side formatting with the current setup. I skipped for now since I think the fixes included will take care of the biggest problems.

Detailed Description

How to Test the Changes

Test interact with the date picker in the filter sidebar.

Screenshots

Before:
Screenshot 2026-01-29 at 13 18 58

After:
Screenshot 2026-01-29 at 13 07 56

Summary by CodeRabbit

  • Chores

    • Updated nova-ui-kit dependency.
  • Bug Fixes

    • Enhanced date picker popover positioning and calendar month reset functionality when closing the picker.
    • Fixed page footer stacking to prevent visual overlap with other page elements.

✏️ Tip: You can customize this high-level summary in your review settings.

@netlify
Copy link

netlify bot commented Jan 29, 2026

Deploy Preview for antenna-preview ready!

Name Link
🔨 Latest commit 068f1ba
🔍 Latest deploy log https://app.netlify.com/projects/antenna-preview/deploys/697ca31c8d65cb00087ff881
😎 Deploy Preview https://deploy-preview-1105--antenna-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 61 (🔴 down 5 from production)
Accessibility: 80 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (no change from production)
PWA: 80 (no change from production)
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Jan 29, 2026

Deploy Preview for antenna-ssec ready!

Name Link
🔨 Latest commit 068f1ba
🔍 Latest deploy log https://app.netlify.com/projects/antenna-ssec/deploys/697ca31c7b57900008a19be2
😎 Deploy Preview https://deploy-preview-1105--antenna-ssec.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 29, 2026

📝 Walkthrough

Walkthrough

Three UI changes: a dependency version bump for nova-ui-kit, an increased z-index in the page footer SCSS, and state/positioning adjustments to the date picker (popover placement, month state, and calendar props).

Changes

Cohort / File(s) Summary
Dependencies
ui/package.json
Bumped nova-ui-kit from ^1.1.32 to ^1.1.33.
Styling
ui/src/design-system/components/page-footer/page-footer.module.scss
Increased wrapper z-index from 2 to 50 (stacking context change).
Date picker component
ui/src/design-system/components/select/date-picker.tsx
Added internal selected memo and month state; reset month on popover close via effect; changed Popover.Content to side="bottom" and avoidCollisions={false}; passed month, onMonthChange, and captionLayout="dropdown" to Calendar. Review popover/calendar interaction and state reset logic.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant DatePicker
  participant Popover
  participant Calendar

  User->>DatePicker: click to open
  DatePicker->>Popover: open()
  Popover->>Calendar: render(month = DatePicker.month, captionLayout="dropdown")
  User->>Calendar: change month / select date
  Calendar->>DatePicker: onMonthChange(newMonth) / onSelect(date)
  DatePicker->>DatePicker: update month, call onValueChange(selected)
  User->>DatePicker: close popover
  DatePicker->>DatePicker: effect resets month to selected
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

A rabbit hops, a tiny cheer,
Versions nudged and footers clear,
The calendar finds its grounded place,
Month resets with gentle grace,
UI hums along—soft, bright, and near. 🐇✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately reflects the main changes: updating the date picker version and adjusting layout logic to force bottom positioning.
Description check ✅ Passed The description includes Summary, Detailed Description, How to Test, and Screenshots. However, it lacks a formal 'List of Changes', 'Related Issues', and 'Deployment Notes' sections.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ 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 fix/update-date-picker

Tip

🧪 Unit Test Generation v2 is now available!

We have significantly improved our unit test generation capabilities.

To enable: Add this to your .coderabbit.yaml configuration:

reviews:
  finishing_touches:
    unit_tests:
      enabled: true

Try it out by using the @coderabbitai generate unit tests command on your code files or under ✨ Finishing Touches on the walkthrough!

Have feedback? Share your thoughts on our Discord thread!


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

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

@annavik
Copy link
Member Author

annavik commented Jan 29, 2026

@coderabbitai review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jan 29, 2026

✅ Actions performed

Review triggered.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

@annavik annavik requested a review from mihow January 29, 2026 12:46
@annavik annavik assigned annavik and unassigned mihow Jan 29, 2026
@mihow
Copy link
Collaborator

mihow commented Jan 30, 2026

Hey this works really well! I like the month & year pickers. Thanks @annavik. I tested in the collection form as well. One additional enhancement would be to open the calendar to the date that has already been selected. On my system if I select April 1, 1984, then open the calendar again it starts from Jan 2026.

image

@annavik
Copy link
Member Author

annavik commented Jan 30, 2026

Hey this works really well! I like the month & year pickers. Thanks @annavik. I tested in the collection form as well. One additional enhancement would be to open the calendar to the date that has already been selected. On my system if I select April 1, 1984, then open the calendar again it starts from Jan 2026.

image

Good point! Fixed ✅

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants