Rework reflow on the mobile devices

[JuliaKirschenheuter]

Steps to reproduce

This is an accessibility issue.

When using the app on a smaller, vertical screen and activating “New event” a fly-out menu opens from the right. This should open on top of interface, but it opens under the menu field, and the user won’t be able to reach it.

This does not technically fail this WCAG-criterion, though it would be a serious issue for someone trying to use the app on a mobile phone.

Expected behavior

Popover comes in front (on the top) of the view.

Actual behaviour

At the moment it looks like this

Calendar app version

3.3.2

CalDAV-clients used

No response

Browser

No response

Client operating system

No response

Server operating system

No response

Web server

No response

Database engine version

No response

PHP engine version

No response

Nextcloud version

No response

Updated from an older installed version or fresh install

No response

List of activated apps

No response

Nextcloud configuration

No response

Web server error log

No response

Log file

No response

Browser log

No response

Additional info

No response

[szaimen]

Does nextcloud-libraries/nextcloud-vue#2747 address this?

[JuliaKirschenheuter]

Does nextcloud-libraries/nextcloud-vue#2747 address this?

This ticket fixes a problem with a sidebar.

I've tested it with modal + (not completely) hidden sidebar - and this doesn't work

[szaimen]

I've tested it with modal + (not completely) hidden sidebar - and this doesn't work

Can you post a screenshot of this?

[JuliaKirschenheuter]

I've tested it with modal + (not completely) hidden sidebar - and this doesn't work

Can you post a screenshot of this?

This one #4283 (comment)

[szaimen]

This one #4283 (comment)

Okay but this should be fixed with nextcloud-libraries/nextcloud-vue#2747 due to the z-index change...

[JuliaKirschenheuter]

Okay but this should be fixed with nextcloud/nextcloud-vue#2747 due to the z-index change...

Hm, i've tested it, but haven't seen a difference. Could you test it too?

[szaimen]

If you have tested it I guess it does not work as expected... Can you show a screenshot of your test? Does it still look the same like your initial report here?

[JuliaKirschenheuter]

Does it still look the same like your initial report here?

yes =(

[szaimen]

yes =(

Then your test does not seem to work... Did you clear all caches and linked the vue repo correctly?

[szaimen]

yes =(

Then your test does not seem to work... Did you clear all caches and linked the vue repo correctly?

I am asking because at least the right sidebar should then span the whole width on mobile (below 512px)

[szaimen]

This can now be tested again with https://github.com/nextcloud/nextcloud-vue/releases/tag/v6.0.0-alpha.0

[szaimen]

Also the new calendar beta release contains this fix now.