See more popup off screen when calendar is in an `overflow-x: auto` container

[Tiim]

Version

• @toast-ui/calendar: 2.1.3

Test Environment

• Chrome on Windows
• Firefox on Android

Current Behavior

I have the following html and css for the calendar: The calendar is supposed to be viewed on a mobile device, therefore it is scrollable through the .calendar-container wrapper.

<div class="calendar-container">
  <div class="calendar" style="width: 800px" id="calendar" />
</div>

.calendar-container {
  width: 100%;
  overflow-x: auto;
}
.calendar {
  height: 1200px;
}

When the container is small enough to have a horizontal scrollbar and the "see-more" popup is shown for an event that is only visible through scrolling, then this popup escapes the container element somehow.

A little clip showing the problem

https://user-images.githubusercontent.com/1063187/187667835-a9b77086-e603-43c0-80dc-9dca8d0acf50.mp4

Expected Behavior

The "see more" popup should be either in the center of the calendar or directly on top of the day it references.

[adhrinae]

@Tiim Well... the calendar adjusts the position of the popup by vertical scrolling only. So it might be fixed but we really didn't expect your use case. because this library is not meant to support either mobile devices or horizontally scrollable containers.

This issue will be in our backlog but I cannot guarantee when it is fixed.