fix(NcAppNavigation): Wrap app navigation default slot with scrollable container

[Pytal]

• Fix fix(settings): Split group lists nextcloud/server#43804 (comment)

☑️ Resolves

• To fix the unscrollable content in NcAppNavigationList we wrap the entire default slot with a container
• The div.app-navigation__body now fills the height with height: 100%
  • Remove the redundant &:nth-last-of-type(2) fill styles
• NcAppNavigationList now has height: fit-content in all contexts and is itself not scrollable now that scrolling is delegated to the container similar to the ul.app-navigation__list list slot behaviour

🖼️ Screenshots

🏚️ Before	🏡 After

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable
• 3️⃣ Backport to next requested with a Vue 3 upgrade

[ShGKme]

With the default slot, it is always more complicated. If short syntax (not <template #default>) is used, then the slot is passed. Even it is actually empty with empty strings from the template.

[ShGKme]

$slots will work here in Vue 2 as well as double-render with isSlotPopupated() in Vue 3

[Pytal]

With the default slot, it is always more complicated. If short syntax (not <template #default>) is used, then the slot is passed. Even it is actually empty with empty strings from the template.

In this case it seems to not be an empty string but rather a modal https://github.com/nextcloud/server/blob/c18ffe0cad13dc5903cbb08ffbdb787f01db5e35/apps/files/src/views/Navigation.vue#L71-L73 that is causing this 🤔

Not sure how we could resolve this on nc/vue side, any ideas?

And because of flex, it is stretched by default:

How can I repro this?

[ShGKme]

In this case it seems to not be an empty string but rather a modal https://github.com/nextcloud/server/blob/c18ffe0cad13dc5903cbb08ffbdb787f01db5e35/apps/files/src/views/Navigation.vue#L71-L73 that is causing this 🤔

Yes, but the same issue would be in other cases. Anything in components's content, even if it actually is not rendered, cause this issue. With the default slot it's always more annoying...

Not sure how we could resolve this on nc/vue side, any ideas?

Let me have a look on the issue...

How can I repro this?

I though that was on this branch + your branch on server for the same issue. Be let me double check.

[ShGKme]

And because of flex, it is stretched by default:

How can I repro this?

Ok, it seems to work fine now on your branch.

[JuliaKirschenheuter]

seems to good ;) thank you!

[Pytal]

Pushed a fixup (squashed!) to document NOT putting any NcModal/NcDialog inside the NcAppNavigation default slot

Only one place https://github.com/nextcloud/server/blob/c18ffe0cad13dc5903cbb08ffbdb787f01db5e35/apps/files/src/views/Navigation.vue#L71-L73 would need to be adjusted

[ShGKme]

Should be also tested with Talk

[ShGKme]

It breaks Talk

[ShGKme]

And mail. So, any app that has both default and list slots.

[Pytal]

It breaks Talk

And mail. So, any app that has both default and list slots.

💀💀 we'll need to find a solution without using default slot then

I think then we should add a new slot for this specific use-case instead of changing default slot behaviour, what do you think @ShGKme?

[ShGKme]

I think then we should add a new slot for this specific use-case instead of changing default slot behaviour, what do you think @ShGKme?

I'd not add a new slot here. A new slot means — +4 cases to support in the component (combination with other slots) and a new interface — so no revert without a breaking change.

💀💀 we'll need to find a solution without using default slot then

I think, using the default slot is fine. The problem is probably mixing some styles between #list slot in <NcAppNavigation> and <NcAppNavigationList> which can be used in both the default slot and list.

We can try to keep #list slot styles as it is, removing them from the component itself, and then fix layout on the User settings page because it has it's own layout.