When scrolling the screen, the position of the Dynamic Filter calendar display is misaligned.

[yuki-yogi]

Describe the bug

When using a vertically scrollable screen (e.g., one with tall cards or sections), the calendar input from flatpickr appears misaligned when the user scrolls to the lower part of the page and interacts with the input form. This behavior is demonstrated in the attached video recording.

Reproduction repository for the bug

none

Steps to use in the reproduction repository

Steps to reproduce the behavior:

1. Add a vertically tall component like a card to the screen.
2. Place a flatpickr input field near the bottom of the component.
3. Scroll to the bottom of the screen.
4. Click on the flatpickr input field.
5. Observe that the calendar dropdown appears misaligned.

Expected behavior & Actual behavior

Expected behavior: The calendar dropdown should appear directly below the input field, regardless of scroll position.
Actual behavior: The calendar dropdown is misaligned, possibly due to incorrect positioning calculations when the input field is scrolled into view.

System configuration

Avo version: 3.16.2

Rails version: 8.0.1

Ruby version: 3.4.1

License type:

• Community
• Pro
• Advanced

Are you using Avo monkey patches, overriding views or view components?

• Yes. If so, please post code samples.
• No

Im currently exploring solutions. While we considered using appendTo in picker_options to avoid the issue, it seems that picker_options is not yet supported. Therefore, we are looking into alternative approaches.

#3182

Screenshots or screen recordings

date_filter.mov

Additional context

Impact

• High impact (It makes my app un-usable.)
• Medium impact (I'm annoyed, but I'll live.)
• Low impact (It's really a tiny thing that I could live with.)

Urgency

• High urgency (I can't continue development without it.)
• Medium urgency (I found a workaround, but I'd love to have it fixed.)
• Low urgency (It can wait. I just wanted you to know about it.)

[yuki-yogi]

I was able to avoid this problem by using the following style

.flatpickr-calendar {
    position: fixed !important;
}