Merge pull request #5347 from nextcloud-libraries/fix/app-nav-list-sc…

…roll

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

src/components/NcAppNavigation/NcAppNavigation.vue

@@ -64,7 +64,11 @@ emit('toggle-navigation', {
 			class="app-navigation__content"
 			:inert="!open || undefined"
 			@keydown.esc="handleEsc">
-			<slot />
+			<div v-if="$scopedSlots.default" class="app-navigation__body">
+				<!-- @slot Content within the nav, do NOT add NcModal/NcDialog inside this slot -->
+				<slot />
+			</div>
+
 			<!-- List for Navigation li-items -->
 			<ul v-if="$scopedSlots.list" class="app-navigation__list">
 				<slot name="list" />
@@ -255,6 +259,17 @@ export default {
 		position: absolute;
 	}
 
+	&__body {
+		position: relative;
+		height: 100%;
+		width: 100%;
+		overflow-x: hidden;
+		overflow-y: auto;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+	}
+
 	&__content > ul,
 	&__list {
 		position: relative;

src/components/NcAppNavigationList/NcAppNavigationList.vue

@@ -63,17 +63,11 @@ ul.app-navigation-list { // Increase specificity over NcAppNavigation styles
 	position: relative;
 	height: fit-content;
 	width: 100%;
-	overflow: unset;
+	overflow: visible;
 	box-sizing: border-box;
 	display: flex;
 	flex-direction: column;
 	gap: var(--default-grid-baseline, 4px);
 	padding: var(--app-navigation-padding);
-
-	&:nth-last-of-type(2) {
-		// Fill remaining space before NcAppNavigation footer
-		height: 100%;
-		overflow: auto;
-	}
 }
 </style>