Merge pull request #4865 from nextcloud-libraries/fix/appsettings-pad…

…ding

fix(NcAppSettingsDialog): Remove navigation instead of hiding and fix styles

src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue

@@ -144,9 +144,9 @@ export default {
 		v-bind="dialogProperties"
 		@update:open="handleCloseModal">
 		<template #navigation="{ isCollapsed }">
-			<ul :aria-label="settingsNavigationAriaLabel"
-				v-show="!isCollapsed"
-				:class="{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }"
+			<ul v-if="!isCollapsed"
+				:aria-label="settingsNavigationAriaLabel"
+				class="navigation-list"
 				role="tablist">
 				<li v-for="section in sections" :key="section.id">
 					<a :aria-selected="section.id === selectedSection"
@@ -405,20 +405,19 @@ export default {
 	&:deep(.dialog) {
 		min-height: 256px;
 	}
-	&__navigation {
+	:deep &__navigation {
 		min-width: 200px;
 		margin-right: 20px;
 		overflow-x: hidden;
 		overflow-y: auto;
 		position: relative;
-		height: 100%;
 	}
-	&__content {
-		max-width: 100vw;
+	:deep &__content {
+		box-sizing: border-box;
+
 		overflow-y: auto;
 		overflow-x: hidden;
-		padding: 24px;
-		width: 100%;
+		padding-inline: 20px;
 		min-height: 256px;
 	}
 }
@@ -429,12 +428,6 @@ export default {
 	overflow-y: auto;
 	padding: 12px;
 
-	&--collapsed {
-		display: flex;
-		flex-direction: row;
-		gap: 6px;
-	}
-
 	&__link {
 		display: flex;
 		align-content: center;

src/components/NcDialog/NcDialog.vue

@@ -272,7 +272,7 @@ export default defineComponent({
 		/**
 		 * We use the dialog width to decide if we collapse the navigation (flex direction row)
 		 */
-		const { width: dialogWidth } = useElementSize(wrapper)
+		const { width: dialogWidth } = useElementSize(wrapper, { width: 900 })
 
 		/**
 		 * Whether the navigation is collapsed due to dialog and window size