DateTime picker in sidebar gets cut off

[Ontopic]

Bug Report

When a DateTime field has position: 'sidebar' the time dropdown is cut off

Possible Solution

.collection-edit__sidebar-sticky {
  overflow: initial;

  .date-time-picker .react-datepicker-popper {
    right: 0 !important;
    left: initial !important;
  }
}

Possibly better to just set overflow-x

Is how I now fix it in the scss override, probably best to move something like this to the core though (the sidebar never fits the calendar atm). Making sure you guys agree with this direction and I can clean up my hacks and turn it into a proper PR.

[jmikrut]

Hey @Ontopic — thank you for the report! We will be addressing this today and will release a new version immediately afterward.

[jmikrut]

Update: we've got a bit more involved of a solution in mind here, as we'd like to keep overflow: auto on the .collection-edit__sidebar-sticky element. Setting overflow: initial removes the ability for the sidebar to be sticky and / or vertically scroll when taller than the viewport, unfortunately.

Going to pick back up on this shortly. Just wanted to provide an update here that we do have an idea for how to fix this and it's on its way!

[jmikrut]

Hey @Ontopic — this is now fixed! We went with a solution similar to what you can see here:

https://codepen.io/toomuchdesign/pen/RKLGba

And then a little more magic here and there of course.

Thanks for identifying this!

[Ontopic]

Went a looked at how you fixed it. Nice and elegant.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.