Edit simple is very unstable because of different widths and having dynamic fields

[GretaD]

Steps to reproduce

1. Open calendar app
2. Add a new event or edit an existing one
3. See the simple editor changing sizes

Expected behavior

I have a stable design

Actual behavior

the popover has different width and size depending on what you are doing. That is very distracting. Also, the editing state doesnt have all the elements in an editing state, and i think it should. Timezone in this case its not, unless you click on it, which makes the popover jump around when that is clicked because the timezone changes state and design.

The editing view is very small, and the viewing mode is very small. I would propose that the popover has the same width no matter what action is clicked. A short view of the issue

Screencast.from.2025-01-15.11-26-09.mp4

Calendar app version

No response

CalDAV-clients used

No response

Browser

No response

Client operating system

No response

Server operating system

No response

Web server

None

Database engine version

None

PHP engine version

None

Nextcloud version

No response

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

The issue comes from the changes done here: #6385 (comment)

cc @nimishavijay

related: #6625

[nimishavijay]

Agreed! Both the position and the width should change as less as possible. Things that could help this:

• I see that the min-width of the modal is set to 300px, we could make it 400px. This way the width shouldn't change when you toggle the all day checkbox (at least when the language is english)
• I also see that the time zone field extends out of the container (bug), and that the max-width of the container is set to 480px. Could we:
  • Make the max-width 600px and
  • Make the width of the time zone NcSelect fill the rest of the space on the right
• Nice-to-have: Could we add some transitions to ease the size changing? Eg. a 0.3s ease-in for width and height? Not sure how this would look but worth trying IMO. Also could be a larger follow up.

What do you think? :)

Before	After

20250121-0943-37.5757805.mp4

20250121-0941-54.2020229.mp4