diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index eee36cb36b..5bf9d71d74 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -58,3 +58,6 @@ $breakpoint-mobile: 1024px;
 
 // top-bar spacing
 $topbar-margin: 4px;
+
+// navigation spacing
+$app-navigation-settings-margin: 3px;
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
index b9ba522891..f186d39203 100644
--- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
+++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -87,10 +87,11 @@ export default {
 <style lang="scss" scoped>
 #app-settings {
 	margin-top: auto;
-	padding: calc(var(--default-grid-baseline, 4px) * 2);
+	padding: $app-navigation-settings-margin;
 
 	&__header {
 		box-sizing: border-box;
+		margin: 0 $app-navigation-settings-margin $app-navigation-settings-margin $app-navigation-settings-margin;
 
 		.settings-button {
 			display: flex;
@@ -132,6 +133,10 @@ export default {
 	&__content {
 		display: block;
 		padding: 10px;
+
+		/* prevent scrolled contents from stopping too early */
+		margin-bottom: -$app-navigation-settings-margin;
+
 		/* restrict height of settings and make scrollable */
 		max-height: 300px;
 		overflow-y: auto;