Replace horizontal scrolling with vertical scrolling on small screens…

… in app settings navigation Signed-off-by: julia.kirschenheuter <[email protected]>
nextcloud-libraries · Nov 17, 2023 · 67864fc · 67864fc
1 parent 5db6b10
commit 67864fc
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -145,6 +145,7 @@ export default {
 		@update:open="handleCloseModal">
 		<template #navigation="{ isCollapsed }">
 			<ul :aria-label="settingsNavigationAriaLabel"
+				v-show="!isCollapsed"
 				:class="{ 'navigation-list': true, 'navigation-list--collapsed': isCollapsed }"
 				role="tablist">
 				<li v-for="section in sections" :key="section.id">
@@ -469,4 +470,12 @@ export default {
 	}
 }
 
+@media only screen and (max-width: 320px) {
+	.navigation-list {
+		&--collapsed {
+			display: none;
+		}
+	}
+}
+
 </style>