feat(files): better breakpoints and sidebar responsive design

[skjnldsv]

This uses 3 breakpoints for better visibility:

• 1024
• 768
• 512

Files kinda had those (480 instead of 512), and I think it's alright like this. What do you think @jancborchardt ? Shall we push that to other apps too?

Without sidebar:

Peek.12-04-2023.18-41.mp4

With sidebar:

Peek.12-04-2023.18-42.mp4

Various screenshots:

	Without sidebar	With sidebar
1366
1024
768
512

[skjnldsv]

There is one thing I would change, is increasing the breakpoint of the Sidebar going full screen (512 at the moment). This would need a fix in the vue components. Otherwise you can have this:

[szaimen]

Looks great from the screnshots/casts and the code looks good! :)
(but didnt test)

[szaimen]

There is one thing I would change, is increasing the breakpoint of the Sidebar going full screen (512 at the moment). This would need a fix in the vue components.

I agree, should we increase this to 768? (I could do the PR if you want)

(would need to adjust https://github.com/nextcloud/nextcloud-vue/pull/2747/files)

[szaimen]

CI failure unrelated

[szaimen]

There is one thing I would change, is increasing the breakpoint of the Sidebar going full screen (512 at the moment). This would need a fix in the vue components.

I agree, should we increase this to 768? (I could do the PR if you want)

(would need to adjust https://github.com/nextcloud/nextcloud-vue/pull/2747/files)

done in nextcloud-libraries/nextcloud-vue#3972