feat: Enhance template picker size and layout depending on aspect ratio

[juliushaertl]

Adapt the template picker modal size to large to take more use of screen when available and adapt the sizing of the previews to be

• maximum 3 per line for landscape aspect ratio, size has been increased
• maximum 4 per line for portrait/square aspect ratio

Summary

Before	After

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[juliushaertl]

cc @nickvergessen As i noticed that talk has a similar picker implementation on its own

https://github.com/nextcloud/spreed/blob/master/src/components/NewMessageForm/NewMessageForm.vue#L489

[szaimen]

I see. Fine by me then but didnt test

[szaimen]

However the buttons to confirm and cancel being so far apart on the left and right looks kind of strange to me...

[nickvergessen]

Thanks for the ping, added a talk issue for tracking

[jancborchardt]

Looks great, very good idea @juliushaertl! 👍 as discussed! :)

However the buttons to confirm and cancel being so far apart on the left and right looks kind of strange to me...

@szaimen yeah, although I wouldn’t put them directly next to each other either. Rather we could remove the Cancel button since there is already an X close on the top right. We also don’t have a "Cancel" in the Move/Copy dialog for example.

[szaimen]

Rather we could remove the Cancel button since there is already an X close on the top right. We also don’t have a "Cancel" in the Move/Copy dialog for example.

Good point

[juliushaertl]

Done: