Merge pull request #3256 from nextcloud/fix/pixel-perfect-app-navigat…

…ion-settings Make app navigation settings pixel perfect-ish
nextcloud-libraries · Sep 15, 2022 · b83c16d · b83c16d
2 parents 0578fc5 + d52e85d
commit b83c16d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git 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
@@ -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;