fix: Make sidebar buttons pixel perfect

Co-authored-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Carl Schwan <carl@carlschwan.eu>

src/components/NcAppSidebar/NcAppSidebar.vue

@@ -1136,7 +1136,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-$desc-vertical-padding: 18px;
+$desc-vertical-padding: $app-navigation-padding; // align with app navigation
 $desc-vertical-padding-compact: 10px;
 $desc-input-padding: 7px;
 
@@ -1145,7 +1145,7 @@ $desc-name-height: 30px;
 $desc-subname-height: 22px;
 $desc-height: $desc-name-height + $desc-subname-height;
 
-$top-buttons-spacing: 6px;
+$top-buttons-spacing: $app-navigation-padding; // align with app navigation
 
 /*
 	Sidebar: to be used within #content
@@ -1201,34 +1201,35 @@ $top-buttons-spacing: 6px;
 				flex-direction: row;
 
 				.app-sidebar-header__figure {
+					--figure-size: calc($desc-height + $desc-vertical-padding);
 					z-index: 2;
-					width: $desc-height + $desc-vertical-padding;
-					height: $desc-height + $desc-vertical-padding;
-					margin: math.div($desc-vertical-padding, 2);
+					width: var(--figure-size);
+					height: var(--figure-size);
+					margin: calc($desc-vertical-padding / 2);
 					border-radius: 3px;
 					flex: 0 0 auto;
 				}
 				.app-sidebar-header__desc {
 					padding-left: 0;
 					flex: 1 1 auto;
 					min-width: 0;
-					padding-right: 2 * $clickable-area + $top-buttons-spacing;
+					padding-right: calc(2 * $clickable-area + $top-buttons-spacing);
 					padding-top: $desc-vertical-padding-compact;
 
 					&.app-sidebar-header__desc--without-actions {
-						padding-right: #{$clickable-area + $top-buttons-spacing};
+						padding-right: calc($clickable-area + $top-buttons-spacing);
 					}
 
 					.app-sidebar-header__tertiary-actions {
 						z-index: 3; // above star
 						position: absolute;
-						top: math.div($desc-vertical-padding, 2);
+						top: calc($desc-vertical-padding / 2);
 						left: -1 * $clickable-area;
 						gap: 0; // override gap
 					}
 					.app-sidebar-header__menu {
 						top: $top-buttons-spacing;
-						right: $clickable-area + $top-buttons-spacing; // left of the close button
+						right: calc($clickable-area + $top-buttons-spacing); // left of the close button
 						position: absolute;
 					}
 				}
@@ -1241,14 +1242,14 @@ $top-buttons-spacing: 6px;
 			.app-sidebar-header__menu {
 				position: absolute;
 				top: $top-buttons-spacing;
-				right: $top-buttons-spacing + $clickable-area;
+				right: calc($top-buttons-spacing + $clickable-area);
 			}
 			// increase the padding to not overlap the menu
 			.app-sidebar-header__desc {
-				padding-right: #{$clickable-area * 2 + $top-buttons-spacing};
+				padding-right: calc($clickable-area * 2 + $top-buttons-spacing);
 
 				&.app-sidebar-header__desc--without-actions {
-					padding-right: #{$clickable-area + $top-buttons-spacing};
+					padding-right: calc($clickable-area + $top-buttons-spacing);
 				}
 			}
 		}
@@ -1279,7 +1280,7 @@ $top-buttons-spacing: 6px;
 			flex-direction: row;
 			justify-content: center;
 			align-items: center;
-			padding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} #{math.div($desc-vertical-padding, 2)};
+			padding: #{$desc-vertical-padding} #{$top-buttons-spacing} #{$desc-vertical-padding} calc($desc-vertical-padding / 2);
 			gap: 0 4px;
 
 			// custom overrides