Event Popup Overflows Viewport: Issues with Top/Bottom Visibility on Calendar Clicks
Steps to reproduce
There is already a similar ticket open regarding this bug; here is the link: Popup modal buttons disappear off screen. #6772 The event popup window hides (either the top or bottom part) even on large screens. This occurs not only when adding attendees and increasing the popup height but also when clicking on a higher or lower position in the calendar. I have attached a video demonstrating the issue. For now, I have resolved it by adding the following CSS, but I hope this will be addressed soon as it makes usage difficult.
.v-popper__popper.event-popover { position: fixed!important; max-height: 90vh!important; overflow: visible!important; top: 10%!important; left: 50%!important; transform: translateX(-50%)!important; z-index: 10000!important; }
- Open the calendar view on the application.
- Click on a time slot that is slightly higher or lower than the center of the calendar.
- Observe the behavior of the event popup window.
https://github.com/user-attachments/assets/7a2b04ac-947c-41a1-94a9-68e9ee87e2bf
Expected behavior
The event popup window should appear fully visible and centered within the viewport, regardless of where the click occurs on the calendar. It should dynamically adjust its position to ensure all its elements are accessible.
Actual behavior
The popup window is partially hidden, either off the top or bottom of the screen, depending on the position clicked in the calendar. This makes certain elements of the popup inaccessible.
Calendar app version
5.2.0
CalDAV-clients used
No response
Browser
Chrome 134
Client operating system
No response
Server operating system
No response
Web server
None
Database engine version
None
PHP engine version
None
Nextcloud version
31.0.2
Updated from an older installed version or fresh install
None
List of activated apps
Nextcloud configuration
Web server error log
Log file
Browser log
Additional info
No response
I reported a similar but different bug over 2 years ago and it's still not been addressed 🙃
https://github.com/nextcloud/calendar/issues/4893
Seeing exactly the same thing here on Firefox 136.0.2. It also happens on the month view which I normally use and the window can sometimes be too far off the top as well as (the more common) off the bottom of the screen.
+1 On small screens, the 'Create Event' popup is not properly centered and overflows beyond the visible area.
Seeing this also on laptops, both under Firefox and Edge. This is very disruptive as you often can't even click the button to save a new event, pretty much breaking the calendar app for our users.