Don't scroll datepicker in AppSidebar with body

[raimund-schluessler]

This is the IMHO better but also more interfering solution to #998 than #1880 as it needs changes to AppSidebar and the datepicker library. In difference to #1880, the datepicker dropdown will not scroll with body.

In order to allow an absolutely positioned element (the datepicker) to overflow its ancestor although it has overflow: hidden set, the first positioned ancestor of the datepicker has to be an ancestor of the element with overflow: hidden as well (see https://css-tricks.com/popping-hidden-overflow/ for a bit of background and explanation).

This means we have to adjust AppSidebar to look like this:

<aside id="app-sidebar-vue" class="app-sidebar"> <!-- first positioned parent, position: sticky; -->
	<div class="app-sidebar-wrapper"> <!-- element with overflow-x: hidden; overflow-y: auto; -->
		<datepicker> <!-- absolutely positioned datepicker dropdown-->
	</div>
</aside>

Then the datepicker is positioned relative to aside and is allowed to overflow app-sidebar-wrapper. Since the datepicker library currently assumes that the datepicker is position: relative; it needs a fix to account for another element to be the first positioned ancestor. I have done this in https://github.com/raimund-schluessler/vue2-datepicker/commit/df040dbd5929f8f83f19390f396c924099ac7a38 and would send a PR to the datepicker library when we decide that this is a viable solution.

The great thing is that the datepicker is not cut-off, all scrolling inside the AppSidebar still works and the datepicker is static when scrolling body (tested in Firefox and Chrome):

The changes to AppSidebar look more drastic than they actually are. I just added another div wrapping the AppSidebar, but this changes the indentation of all elements.
However, since the AppSidebar structure would change, custom adjustments maybe done by some apps might break (but should be fixable easily).

[nickvergessen]

Better reviewed as https://github.com/nextcloud/nextcloud-vue/pull/1881/files?w=1

But this is not my level of expertise

[raimund-schluessler]

@nextcloud/vuejs @skjnldsv Ping 🙂
Could I have a decision if we want to pursue this further? If so, I would rebase the PR and push the necessary upstream changes further.

[skjnldsv]

Please add documentation

[skjnldsv]

Could I have a decision if we want to pursue this further?

Honestly, the amount of changes to this PR is humongous :(
I really would not touch the AppSidebar component as this is stable. I am afraid of yet another brekage

[raimund-schluessler]

Could I have a decision if we want to pursue this further?

Honestly, the amount of changes to this PR is humongous :( I really would not touch the AppSidebar component as this is stable. I am afraid of yet another brekage

Well, humongous is a bit exaggerated. Neglacting whitespace changes, the PR "only" adds another div to the sidebar as a wrapper (and adjusts the CSS to make this work). But I get your point, breaking something is not excluded for sure.
I guess we can live with the Datepicker scrolling with body then.

[skjnldsv]

Well, humongous is a bit exaggerated

Sorry, that's a bit exaggerated yes 🙈
Also, I'm not the sole manager of this repo, maybe others are interested and/or can help review this PR.
But I've become too cautious nowadays 🙊