diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss
index 95738f4244..4ebd98030e 100644
--- a/src/assets/NcAppNavigationItem.scss
+++ b/src/assets/NcAppNavigationItem.scss
@@ -10,7 +10,7 @@
 	flex-wrap: wrap;
 	box-sizing: border-box;
 	width: 100%;
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	transition: background-color var(--animation-quick) ease-in-out;
 	transition: background-color 200ms ease-in-out;
 	border-radius: var(--border-radius-element, var(--border-radius-pill));
@@ -86,22 +86,22 @@
 		overflow: hidden;
 		flex: 1 1 0;
 		box-sizing: border-box;
-		min-height: $clickable-area;
+		min-height: var(--default-clickable-area);
 		padding: 0;
 		white-space: nowrap;
 		color: var(--color-main-text);
 		background-repeat: no-repeat;
 		background-position: $icon-margin center;
 		background-size: $icon-size $icon-size;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		.app-navigation-entry-icon {
 			display: flex;
 			align-items: center;
-			flex: 0 0 $clickable-area;
+			flex: 0 0 var(--default-clickable-area);
 			justify-content: center;
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			background-size: $icon-size $icon-size;
 			background-repeat: no-repeat;
 			background-position: $icon-margin center;
@@ -115,7 +115,7 @@
 		}
 
 		.editingContainer {
-			width: calc(100% - #{$clickable-area});
+			width: calc(100% - var(--default-clickable-area));
 			margin: auto;
 		}
 
@@ -146,21 +146,21 @@
 .app-navigation-entry__deleted {
 	display: inline-flex;
 	flex: 1 1 0;
-	padding-left: $clickable-area - $icon-margin !important;
+	padding-left: calc(var(--default-clickable-area) - $icon-margin) !important;
 	.app-navigation-entry__deleted-description {
 		position: relative;
 		overflow: hidden;
 		flex: 1 1 0;
 		white-space: nowrap;
 		text-overflow: ellipsis;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 	}
 }
 
 /* counter and actions */
 .app-navigation-entry__utils {
 	display: flex;
-	min-width: $clickable-area;
+	min-width: var(--default-clickable-area);
 	align-items: center;
 	flex: 0 1 auto;
 	justify-content: flex-end;
diff --git a/src/assets/action.scss b/src/assets/action.scss
index 25566a2e04..a74b187883 100644
--- a/src/assets/action.scss
+++ b/src/assets/action.scss
@@ -51,7 +51,7 @@
 
 		font-weight: normal;
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 
 		& > span {
 			cursor: pointer;
@@ -59,8 +59,8 @@
 		}
 
 		&__icon {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 			background-position: $icon-margin center;
 			background-size: $icon-size;
@@ -68,8 +68,8 @@
 		}
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -83,8 +83,7 @@
 			max-width: 220px;
 			line-height: 1.6em;
 
-			// 14px are currently 1em line-height. Mixing units as '44px - 1.6em' does not work.
-			padding: #{math.div($clickable-area - 1.6 * 14px, 2)} 0;
+			padding: calc((var(--default-clickable-area) - 1.6em) / 2) 0;
 
 			cursor: pointer;
 			text-align: left;
@@ -114,7 +113,7 @@
 			margin-left: auto;
 			// Align with right end of the button
 			// This is the padding-right
-			margin-right: -$icon-margin;
+			margin-right: calc($icon-margin * -1);
 		}
 	}
 }
diff --git a/src/assets/variables.scss b/src/assets/variables.scss
index 0ccc78a100..5d978245df 100644
--- a/src/assets/variables.scss
+++ b/src/assets/variables.scss
@@ -2,19 +2,13 @@
  * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-
-// https://uxplanet.org/7-rules-for-mobile-ui-button-design-e9cf2ea54556
-// recommended is 48px
-// 44px is what we choose and have very good visual-to-usability ratio
-$clickable-area: 44px;
-
 // background icon size
 // also used for the scss icon font
 $icon-size: 16px;
 
-// icon padding for a $clickable-area width and a $icon-size icon
-// ( 44px - 16px ) / 2
-$icon-margin: math.div($clickable-area - $icon-size, 2);
+// icon padding for a var(--default-clickable-area) width and a $icon-size icon
+// ( 34px - 16px ) / 2
+$icon-margin: calc(calc(var(--default-clickable-area) - $icon-size) / 2);
 
 // transparency background for icons
 $icon-focus-bg: rgba(127, 127, 127, .25);
diff --git a/src/components/NcActionButton/NcActionButton.vue b/src/components/NcActionButton/NcActionButton.vue
index 124c52f86a..f638495651 100644
--- a/src/components/NcActionButton/NcActionButton.vue
+++ b/src/components/NcActionButton/NcActionButton.vue
@@ -548,6 +548,6 @@ export default {
 
 .action-button__pressed-icon {
 	margin-left: auto;
-	margin-right: -$icon-margin;
+	margin-right: calc($icon-margin * -1);
 }
 </style>
diff --git a/src/components/NcActionCaption/NcActionCaption.vue b/src/components/NcActionCaption/NcActionCaption.vue
index 964847eac0..a7931c0987 100644
--- a/src/components/NcActionCaption/NcActionCaption.vue
+++ b/src/components/NcActionCaption/NcActionCaption.vue
@@ -46,7 +46,7 @@ export default {
 <style lang="scss" scoped>
 	.app-navigation-caption {
 		color: var(--color-text-maxcontrast);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		box-shadow: none !important;
@@ -54,7 +54,7 @@ export default {
 		pointer-events: none;
 		margin-left: 12px;
 		padding-right: 14px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		display: flex;
 		align-items: center;
 	}
diff --git a/src/components/NcActionCheckbox/NcActionCheckbox.vue b/src/components/NcActionCheckbox/NcActionCheckbox.vue
index 7691f8c32e..2abf584fa1 100644
--- a/src/components/NcActionCheckbox/NcActionCheckbox.vue
+++ b/src/components/NcActionCheckbox/NcActionCheckbox.vue
@@ -182,7 +182,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__checkbox {
diff --git a/src/components/NcActionInput/NcActionInput.vue b/src/components/NcActionInput/NcActionInput.vue
index 43f21555dc..aaaf492446 100644
--- a/src/components/NcActionInput/NcActionInput.vue
+++ b/src/components/NcActionInput/NcActionInput.vue
@@ -520,8 +520,8 @@ $input-margin: 4px;
 		justify-content: center;
 
 		&:deep(.material-design-icon) {
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_full;
 
 			.material-design-icon__svg {
@@ -540,7 +540,7 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
@@ -610,12 +610,12 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-input {
-	padding-bottom: $icon-margin - $input-margin;
+	padding-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-input:not(.action-input--visible-label) {
-	padding-top: $icon-margin - $input-margin;
+	padding-top: calc($icon-margin - $input-margin);
 }
 
 </style>
diff --git a/src/components/NcActionRadio/NcActionRadio.vue b/src/components/NcActionRadio/NcActionRadio.vue
index c637aa3133..7b655260c0 100644
--- a/src/components/NcActionRadio/NcActionRadio.vue
+++ b/src/components/NcActionRadio/NcActionRadio.vue
@@ -177,7 +177,7 @@ export default {
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	/* checkbox/radio fixes */
 	&__radio {
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index edf6e0f9dc..29d91bb237 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -203,7 +203,7 @@ $input-margin: 4px;
 	box-shadow: none;
 
 	font-weight: normal;
-	line-height: $clickable-area;
+	line-height: var(--default-clickable-area);
 
 	& > span {
 		cursor: pointer;
@@ -215,15 +215,15 @@ $input-margin: 4px;
 		min-height: 0;
 		/* Keep padding to define the width to
 			assure correct position of a possible text */
-		padding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;
+		padding: calc(var(--default-clickable-area) / 2) 0 calc(var(--default-clickable-area) / 2) var(--default-clickable-area);
 
 		background-position: #{$icon-margin} center;
 		background-size: $icon-size;
 	}
 
 	&:deep(.material-design-icon) {
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		opacity: $opacity_full;
 
 		.material-design-icon__svg {
@@ -258,10 +258,10 @@ $input-margin: 4px;
 
 		// bottom-right corner
 		position: absolute;
-		right: $icon-margin + 1;
+		right: calc($icon-margin + 1);
 		bottom: 1px;
-		width: #{$clickable-area - $input-margin * 2};
-		height: #{$clickable-area - $input-margin * 2};
+		width: calc(var(--default-clickable-area) - $input-margin * 2);
+		height: calc(var(--default-clickable-area) - $input-margin * 2);
 		box-sizing: border-box;
 		margin: 0;
 		padding: 7px 6px;
@@ -283,10 +283,10 @@ $input-margin: 4px;
 		color: inherit;
 		border-color: var(--color-border-maxcontrast);
 
-		min-height: #{$clickable-area * 2 - $input-margin * 2}; /* twice the element margin-y */
-		max-height: #{$clickable-area * 3 - $input-margin * 2}; /* twice the element margin-y */
+		min-height: calc(var(--default-clickable-area) * 2 - $input-margin * 2); /* twice the element margin-y */
+		max-height: calc(var(--default-clickable-area) * 3 - $input-margin * 2); /* twice the element margin-y */
 		// block width widening
-		min-width: $clickable-area * 4;
+		min-width: calc(var(--default-clickable-area) * 4);
 		width: 100% !important;
 		margin: 0;
 
@@ -329,11 +329,11 @@ $input-margin: 4px;
 // add the same bottomMargin as the right padding
 // for visual balance
 li:last-child > .action-text-editable {
-	margin-bottom: $icon-margin - $input-margin;
+	margin-bottom: calc($icon-margin - $input-margin);
 }
 
 // same for first item
 li:first-child > .action-text-editable {
-	margin-top: $icon-margin - $input-margin;
+	margin-top: calc($icon-margin - $input-margin);
 }
 </style>
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 5e8a202499..08f6f3f8c1 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -2009,7 +2009,7 @@ export default {
 
 	// Spacing between buttons
 	& > button {
-		margin-right: math.div($icon-margin, 2);
+		margin-right: calc($icon-margin / 2);
 	}
 }
 
diff --git a/src/components/NcAppContent/NcAppDetailsToggle.vue b/src/components/NcAppContent/NcAppDetailsToggle.vue
index eaa384dba0..b056683ae3 100644
--- a/src/components/NcAppContent/NcAppDetailsToggle.vue
+++ b/src/components/NcAppContent/NcAppDetailsToggle.vue
@@ -81,8 +81,8 @@ export default {
 <style lang="scss" scoped>
 .app-details-toggle {
 	position: sticky;
-	width: $clickable-area;
-	height: $clickable-area;
+	width: var(--default-clickable-area);
+	height: var(--default-clickable-area);
 	padding: $icon-margin;
 	cursor: pointer;
 	opacity: .6;
diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index 690779f93a..2585b9e104 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -233,7 +233,7 @@ export default {
 		font-weight: bold;
 		color: var(--color-main-text);
 		font-size: var(--default-font-size);
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -246,12 +246,12 @@ export default {
 	}
 
 	&__actions {
-		flex: 0 0 $clickable-area;
+		flex: 0 0 var(--default-clickable-area);
 	}
 }
 
 // extra top space if it's not the first item on the list
 .app-navigation-caption:not(:first-child) {
-	margin-top: math.div($clickable-area, 2);
+	margin-top: calc(var(--default-clickable-area) / 2);
 }
 </style>
diff --git a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
index 51ad8c172e..57e53a5f13 100644
--- a/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
+++ b/src/components/NcAppNavigationIconBullet/NcAppNavigationIconBullet.vue
@@ -72,7 +72,7 @@ export default {
 .app-navigation-entry__icon-bullet {
 	display: block;
 	// there is 2 margins
-	padding: $icon-margin + 1px;
+	padding: calc($icon-margin + 1px);
 	div {
 		width: $icon-size - 2px;
 		height: $icon-size - 2px;
diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
index 981225f664..6b3f455dda 100644
--- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
+++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue
@@ -171,7 +171,7 @@ export default {
 }
 
 .newItemContainer {
-	width: calc(100% - #{$clickable-area});
+	width: calc(100% - var(--default-clickable-area));
 	margin: auto;
 }
 </style>
diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
index 3abbbd66dc..5803ed5954 100644
--- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
+++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue
@@ -85,7 +85,7 @@ export default {
 		.settings-button {
 			display: flex;
 			flex: 1 1 0;
-			height: $clickable-area;
+			height: var(--default-clickable-area);
 			width: 100%;
 			padding: 0;
 			margin: 0;
@@ -98,7 +98,7 @@ export default {
 			font-size: 100%;
 			color: var(--color-main-text);
 			padding-right: 14px;
-			line-height: $clickable-area;
+			line-height: var(--default-clickable-area);
 
 			&:hover,
 			&:focus {
@@ -106,9 +106,9 @@ export default {
 			}
 
 			&__icon {
-				width: $clickable-area;
-				height: $clickable-area;
-				min-width: $clickable-area;
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
+				min-width: var(--default-clickable-area);
 			}
 			&__label {
 				overflow: hidden;
diff --git a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
index 17dad1b1da..2733a4f405 100644
--- a/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
+++ b/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue
@@ -72,7 +72,7 @@ export default {
 	position: absolute;
 	top: var(--app-navigation-padding);
 	right: calc(0px - var(--app-navigation-padding));
-	margin-right: - $clickable-area;
+	margin-right: calc(0px - var(--default-clickable-area));
 }
 
 button.app-navigation-toggle {
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index 8edd3fd7e8..735b789692 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -408,9 +408,9 @@ export default {
 		display: flex;
 		align-content: center;
 		font-size: 16px;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		margin: 4px 0;
-		line-height: $clickable-area;
+		line-height: var(--default-clickable-area);
 		border-radius: var(--border-radius-pill);
 		font-weight: bold;
 		padding: 0 20px;
diff --git a/src/components/NcAppSidebar/NcAppSidebar.vue b/src/components/NcAppSidebar/NcAppSidebar.vue
index 4a6afb92b7..5155c3ce87 100644
--- a/src/components/NcAppSidebar/NcAppSidebar.vue
+++ b/src/components/NcAppSidebar/NcAppSidebar.vue
@@ -1295,12 +1295,12 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 		> .app-sidebar__close {
 			position: absolute;
 			z-index: 100;
-			top: $top-buttons-spacing;
+			top: 0;
 			right: $top-buttons-spacing;
-			width: $clickable-area;
-			height: $clickable-area;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			opacity: $opacity_normal;
-			border-radius: math.div($clickable-area, 2);
+			border-radius: calc(var(--default-clickable-area) / 2);
 			&:hover,
 			&:active,
 			&:focus {
@@ -1327,23 +1327,23 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 					padding-left: 0;
 					flex: 1 1 auto;
 					min-width: 0;
-					padding-right: calc(2 * $clickable-area + $top-buttons-spacing);
+					padding-right: calc(2 * var(--default-clickable-area) + $top-buttons-spacing);
 					padding-top: var(--app-sidebar-padding);
 
 					&.app-sidebar-header__desc--without-actions {
-						padding-right: calc($clickable-area + $top-buttons-spacing);
+						padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
 					}
 
 					.app-sidebar-header__tertiary-actions {
 						z-index: 3; // above star
 						position: absolute;
 						top: calc(var(--app-sidebar-padding) / 2);
-						left: -1 * $clickable-area;
+						left: calc(-1 * var(--default-clickable-area));
 						gap: 0; // override gap
 					}
 					.app-sidebar-header__menu {
 						top: $top-buttons-spacing;
-						right: calc($clickable-area + $top-buttons-spacing); // left of the close button
+						right: calc(var(--default-clickable-area) + $top-buttons-spacing); // left of the close button
 						position: absolute;
 					}
 				}
@@ -1356,14 +1356,14 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 			.app-sidebar-header__menu {
 				position: absolute;
 				top: $top-buttons-spacing;
-				right: calc($top-buttons-spacing + $clickable-area);
+				right: calc($top-buttons-spacing + var(--default-clickable-area));
 			}
 			// increase the padding to not overlap the menu
 			.app-sidebar-header__desc {
-				padding-right: calc($clickable-area * 2 + $top-buttons-spacing);
+				padding-right: calc(var(--default-clickable-area) * 2 + $top-buttons-spacing);
 
 				&.app-sidebar-header__desc--without-actions {
-					padding-right: calc($clickable-area + $top-buttons-spacing);
+					padding-right: calc(var(--default-clickable-area) + $top-buttons-spacing);
 				}
 			}
 		}
@@ -1415,8 +1415,8 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 
 			.app-sidebar-header__tertiary-actions {
 				display: flex;
-				height: $clickable-area;
-				width: $clickable-area;
+				height: var(--default-clickable-area);
+				width: var(--default-clickable-area);
 				justify-content: center;
 				flex: 0 0 auto;
 
@@ -1441,7 +1441,7 @@ $top-buttons-spacing: $app-navigation-padding; // align with app navigation
 				.app-sidebar-header__mainname-container {
 					display: flex;
 					align-items: center;
-					min-height: $clickable-area;
+					min-height: var(--default-clickable-area);
 
 					// main name
 					.app-sidebar-header__mainname {
diff --git a/src/components/NcBreadcrumb/NcBreadcrumb.vue b/src/components/NcBreadcrumb/NcBreadcrumb.vue
index 49ee53bf98..50e6dd2229 100644
--- a/src/components/NcBreadcrumb/NcBreadcrumb.vue
+++ b/src/components/NcBreadcrumb/NcBreadcrumb.vue
@@ -274,7 +274,7 @@ export default {
 .vue-crumb {
 	background-image: none;
 	display: inline-flex;
-	height: $clickable-area;
+	height: var(--default-clickable-area);
 	padding: 0;
 
 	&:last-child {
diff --git a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
index 8e7903bf7e..f4b7aca10a 100644
--- a/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
+++ b/src/components/NcBreadcrumbs/NcBreadcrumbs.vue
@@ -112,7 +112,7 @@ export default {
 .dragme {
 	display: block;
 	width: 100px;
-	height: 44px;
+	height: var(--default-clickable-area);
 	background-color: var(--color-background-dark);
 }
 </style>
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
index 290debd243..446bb3449f 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxContent.vue
@@ -197,9 +197,9 @@ export default {
 	flex-direction: row;
 	gap: 4px;
 	user-select: none;
-	min-height: $clickable-area;
-	border-radius: $clickable-area;
-	padding: 4px calc(($clickable-area - var(--icon-height)) / 2);
+	min-height: var(--default-clickable-area);
+	border-radius: var(--default-clickable-area);
+	padding: 4px calc((var(--default-clickable-area) - var(--icon-height)) / 2);
 	// Set to 100% to make text overflow work on button style
 	width: 100%;
 	// but restrict to content so plain checkboxes / radio switches do not expand
diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index ee950e2eb0..b9baf91bcb 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -426,16 +426,16 @@ export default {
 
 	&__simple {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, $clickable-area);
-		grid-auto-rows: $clickable-area;
+		grid-template-columns: repeat(auto-fit, var(--default-clickable-area));
+		grid-auto-rows: var(--default-clickable-area);
 
 		&-color-circle {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 34px;
-			height: 34px;
-			min-height: 34px;
+			width: var(--clickable-area-small, 34px);
+			height: var(--clickable-area-small, 34px);
+			min-height: var(--clickable-area-small, 34px);
 			margin: auto;
 			padding: 0;
 			color: white;
@@ -449,9 +449,6 @@ export default {
 				opacity: .6;
 			}
 			&--active {
-				width: 38px;
-				height: 38px;
-				min-height: 38px;
 				transition: all 100ms ease-in-out;
 				opacity: 1 !important;
 			}
diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
index 614dbd0aa7..483734d70c 100644
--- a/src/components/NcCounterBubble/NcCounterBubble.vue
+++ b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -75,7 +75,7 @@ export default {
 	font-size: calc(var(--default-font-size) * .8);
 	overflow: hidden;
 	width: fit-content;
-	max-width: $clickable-area;
+	max-width: var(--default-clickable-area);
 	text-align: center;
 	text-overflow: ellipsis;
 	line-height: 1em;
diff --git a/src/components/NcDashboardWidget/NcDashboardWidget.vue b/src/components/NcDashboardWidget/NcDashboardWidget.vue
index ad1d594dcd..0ccf7ff833 100644
--- a/src/components/NcDashboardWidget/NcDashboardWidget.vue
+++ b/src/components/NcDashboardWidget/NcDashboardWidget.vue
@@ -370,7 +370,7 @@ export default {
 	}
 	.item__details {
 		padding-left: 8px;
-		max-height: 44px;
+		max-height: var(--default-clickable-area);
 		flex-grow: 1;
 		overflow: hidden;
 		display: flex;
diff --git a/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue b/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue
index d06ee3452d..8d96683648 100644
--- a/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue
+++ b/src/components/NcDashboardWidgetItem/NcDashboardWidgetItem.vue
@@ -181,7 +181,7 @@ export default {
 <style scoped lang="scss">
 .item-list__entry {
 	display: flex;
-	align-items: flex-start;
+	align-items: center;
 	position: relative;
 	padding: 8px;
 
@@ -197,13 +197,13 @@ export default {
 	}
 	.item__details {
 		padding-left: 8px;
-		max-height: 44px;
+		max-height: var(--default-clickable-area);
 		flex-grow: 1;
 		overflow: hidden;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		min-height: 44px;
+		min-height: var(--default-clickable-area);
 
 		h3,
 		.message {
diff --git a/src/components/NcDateTimePicker/index.scss b/src/components/NcDateTimePicker/index.scss
index d21f20ef35..a68e3d204f 100644
--- a/src/components/NcDateTimePicker/index.scss
+++ b/src/components/NcDateTimePicker/index.scss
@@ -281,7 +281,7 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		height: $clickable-area;
+		height: var(--default-clickable-area);
 		margin-bottom: 4px;
 
 		button {
diff --git a/src/components/NcHeaderMenu/NcHeaderMenu.vue b/src/components/NcHeaderMenu/NcHeaderMenu.vue
index 5c0da7b6f2..3b74401baf 100644
--- a/src/components/NcHeaderMenu/NcHeaderMenu.vue
+++ b/src/components/NcHeaderMenu/NcHeaderMenu.vue
@@ -384,7 +384,7 @@ $externalMargin: 8px;
 		overflow: auto;
 		width: 350px;
 		max-width: calc(100vw - 2 * $externalMargin);
-		min-height: calc(44px * 1.5);
+		min-height: calc(var(--default-clickable-area) * 1.5);
 		max-height: calc(100vh - 50px * 2);
 		:deep(.empty-content) {
 			margin: 12vh 10px;
@@ -394,7 +394,7 @@ $externalMargin: 8px;
 
 @media only screen and (max-width: $breakpoint-small-mobile) {
 	.header-menu {
-		width: $clickable-area;
+		width: var(--default-clickable-area);
 	}
 }
 </style>
diff --git a/src/components/NcInputField/NcInputField.vue b/src/components/NcInputField/NcInputField.vue
index f262907e22..82d5d9ace3 100644
--- a/src/components/NcInputField/NcInputField.vue
+++ b/src/components/NcInputField/NcInputField.vue
@@ -428,7 +428,8 @@ export default {
 		position: absolute;
 		margin-inline: 14px 0;
 		max-width: fit-content;
-		inset-block-start: 11px;
+		// center the label
+		inset-block-start: calc((var(--default-clickable-area) - ( var(--default-font-size) * 1.5 )) / 2);
 		inset-inline: 0;
 		// Fix color so that users do not think the input already has content
 		color: var(--color-text-maxcontrast);
@@ -475,6 +476,7 @@ export default {
 		align-items: center;
 		justify-content: center;
 		opacity: 0.7;
+		top: 1px;
 
 		&--leading {
 			inset-block-end: 0;
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index e5f277f972..aa88675fe5 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -18,7 +18,7 @@
 			:counter-number="44"
 			counterType="highlighted">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #name>
 				<span style="display: flex; color: var(--color-primary);">
@@ -48,10 +48,10 @@
 			:name="'This is an active element with outlined counter'"
 			:bold="false"
 			:active="true"
-			:counter-number="44"
+			:counter-number="34"
 			counterType="outlined">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -76,9 +76,9 @@
 			:name="'This is an active element with normal counter'"
 			:bold="false"
 			:active="true"
-			:counter-number="44">
+			:counter-number="34">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -107,10 +107,10 @@
 			:bold="true"
 			:force-display-actions="true"
 			:details="'1h'"
-			:counter-number="44"
+			:counter-number="34"
 			counterType="highlighted">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -131,10 +131,10 @@
 			:name="'Name of the element with outlined counter'"
 			:bold="false"
 			:force-display-actions="true"
-			:counter-number="44"
+			:counter-number="34"
 			counterType="outlined">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -156,9 +156,9 @@
 			:bold="false"
 			:force-display-actions="true"
 			:details="'1h'"
-			:counter-number="44">
+			:counter-number="34">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #subname>
 				In this slot you can put both text and other components such as icons
@@ -179,7 +179,7 @@
 			:name="'Name of the element'"
 			:bold="false">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #name>
 				<span style="display: flex; gap: 0.5rem; color: var(--color-primary);">
@@ -216,7 +216,7 @@
 			:bold="false"
 			:details="'1h'">
 			<template #icon>
-				<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+				<NcAvatar disable-menu :size="34" user="janedoe" display-name="Jane Doe" />
 			</template>
 			<template #indicator>
 				<!-- Color dot -->
@@ -251,7 +251,7 @@
 	one-line
 	counterType="highlighted">
 	<template #icon>
-		<NcAvatar disable-menu :size="44" user="janedoe" display-name="Jane Doe" />
+		<NcAvatar disable-menu :size="24" user="janedoe" display-name="Jane Doe" />
 	</template>
 	<template #subname>
 		In this slot you can put both text and other components such as icons
@@ -803,8 +803,6 @@ export default {
 	}
 
 	&--compact {
-		padding: 4px 10px;
-
 		.list-item__anchor {
 			.line-one, .line-two {
 				margin-block: -4px;
diff --git a/src/components/NcListItemIcon/NcListItemIcon.vue b/src/components/NcListItemIcon/NcListItemIcon.vue
index dab94d69cc..6b37e6c892 100644
--- a/src/components/NcListItemIcon/NcListItemIcon.vue
+++ b/src/components/NcListItemIcon/NcListItemIcon.vue
@@ -364,11 +364,11 @@ export default {
 	}
 
 	&__icon {
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		color: var(--color-text-maxcontrast);
 		&.icon {
-			flex: 0 0 $clickable-area;
+			flex: 0 0 var(--default-clickable-area);
 			opacity: $opacity_normal;
 			background-position: center;
 			background-size: 16px;
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 4106cd84cf..3c4e630688 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -830,7 +830,7 @@ export default {
 		overflow-x: hidden;
 		box-sizing: border-box;
 		width: 100%;
-		padding: 0 #{$clickable-area * 3} 0 12px; // maximum actions is 3
+		padding: 0 calc(var(--default-clickable-area) * 3) 0 12px; // maximum actions is 3
 		transition: padding ease 100ms;
 		white-space: nowrap;
 		text-overflow: ellipsis;
@@ -841,7 +841,7 @@ export default {
 	// On wider screens the name can be centered
 	@media only screen and (min-width: $breakpoint-mobile) {
 		&__name {
-			padding-left: #{$clickable-area * 3}; // maximum actions is 3
+			padding-left: calc(var(--default-clickable-area) * 3); // maximum actions is 3
 			text-align: center;
 		}
 	}
@@ -858,7 +858,7 @@ export default {
 			align-items: center;
 			justify-content: center;
 			box-sizing: border-box;
-			margin: math.div($header-height - $clickable-area, 2);
+			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 			padding: 0;
 		}
 
@@ -876,28 +876,28 @@ export default {
 				.play-pause-icons__play,
 				.play-pause-icons__pause {
 					opacity: $opacity_full;
-					border-radius: math.div($clickable-area, 2);
+					border-radius: calc(var(--default-clickable-area) / 2);
 					background-color: $icon-focus-bg;
 				}
 			}
 			&__play,
 			&__pause {
 				box-sizing: border-box;
-				width: $clickable-area;
-				height: $clickable-area;
-				margin: math.div($header-height - $clickable-area, 2);
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
+				margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 				cursor: pointer;
 				opacity: $opacity_normal;
 			}
 		}
 
 		&:deep() .action-item {
-			margin: math.div($header-height - $clickable-area, 2);
+			margin: calc(calc($header-height - var(--default-clickable-area)) / 2);
 
 			&--single {
 				box-sizing: border-box;
-				width: $clickable-area;
-				height: $clickable-area;
+				width: var(--default-clickable-area);
+				height: var(--default-clickable-area);
 				cursor: pointer;
 				background-position: center;
 				background-size: 22px;
diff --git a/src/components/NcRelatedResourcesPanel/NcResource.vue b/src/components/NcRelatedResourcesPanel/NcResource.vue
index ab49390b28..2341fdf9e3 100644
--- a/src/components/NcRelatedResourcesPanel/NcResource.vue
+++ b/src/components/NcRelatedResourcesPanel/NcResource.vue
@@ -70,7 +70,7 @@ export default {
 .resource {
 	display: flex;
 	align-items: center;
-	height: 44px;
+	height: var(--default-clickable-area);
 
 	// Override default NcButton styles
 	&__button {
diff --git a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
index 81fe73f9a8..4e9345d2cb 100644
--- a/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
+++ b/src/components/NcRelatedResourcesPanel/NcTeamResources.vue
@@ -232,8 +232,8 @@ export default {
 	.related-team-resource {
 		&__link {
 			display: flex;
-			gap: 12px;
-			height: 44px;
+			gap: calc(3 * var(--default-grid-baseline));
+			height: var(--default-clickable-area);
 			align-items: center;
 			border-radius: var(--border-radius-large);
 
@@ -246,8 +246,8 @@ export default {
 			}
 		}
 		.resource__icon {
-			width: 44px;
-			height: 44px;
+			width: var(--default-clickable-area);
+			height: var(--default-clickable-area);
 			display: flex;
 			align-items: center;
 			justify-content: center;
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index e4740a5688..1a72e92f7a 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -1108,8 +1108,8 @@ export default {
 		background-color: var(--color-main-background);
 		font-family: var(--font-face);
 		font-size: inherit;
-		min-height: $clickable-area;
-		max-height: $clickable-area * 5.5;
+		min-height: var(--default-clickable-area);
+		max-height: calc(var(--default-clickable-area) * 5.5);
 
 		&--has-label {
 			margin-top: 10px;
@@ -1133,7 +1133,7 @@ export default {
 		}
 
 		&--multiline {
-			min-height: $clickable-area * 3;
+			min-height: calc(var(--default-clickable-area) * 3);
 			// No max for mutiline
 			max-height: none;
 		}
diff --git a/src/components/NcRichText/NcReferenceList.vue b/src/components/NcRichText/NcReferenceList.vue
index c61dc99652..e0e1df3b98 100644
--- a/src/components/NcRichText/NcReferenceList.vue
+++ b/src/components/NcRichText/NcReferenceList.vue
@@ -137,6 +137,6 @@ export default {
 }
 
 .widgets--list.icon-loading {
-	min-height: 44px;
+	min-height: var(--default-clickable-area);
 }
 </style>
diff --git a/src/components/NcRichText/NcReferencePicker/NcSearch.vue b/src/components/NcRichText/NcReferencePicker/NcSearch.vue
index d0027f37ef..71894b66c6 100644
--- a/src/components/NcRichText/NcReferencePicker/NcSearch.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcSearch.vue
@@ -320,7 +320,7 @@ export default {
 		}
 
 		.custom-option {
-			height: 44px;
+			height: var(--default-clickable-area);
 			display: flex;
 			align-items: center;
 			overflow: hidden;
diff --git a/src/components/NcRichText/NcReferencePicker/NcSearchResult.vue b/src/components/NcRichText/NcReferencePicker/NcSearchResult.vue
index d725e877a2..42099b829b 100644
--- a/src/components/NcRichText/NcReferencePicker/NcSearchResult.vue
+++ b/src/components/NcRichText/NcReferencePicker/NcSearchResult.vue
@@ -55,7 +55,7 @@ export default {
 .result {
 	display: flex;
 	align-items: center;
-	height: 44px;
+	height: var(--default-clickable-area);
 	overflow: hidden;
 
 	&--icon-class,
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index ea7e12cbd6..76bd11cb3f 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -1175,7 +1175,7 @@ body {
 
 .v-select.select {
 	/* Override default vue-select styles */
-	min-height: $clickable-area;
+	min-height: var(--default-clickable-area);
 	min-width: 260px;
 	margin: 0;
 
diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
index f04cf29fec..7b0832ccc8 100644
--- a/src/components/NcSettingsSection/NcSettingsSection.vue
+++ b/src/components/NcSettingsSection/NcSettingsSection.vue
@@ -140,10 +140,10 @@ $maxWidth: 900px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: $clickable-area;
-		height: $clickable-area;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
 		// make sure to properly align the icon with the text
-		margin: -$icon-margin;
+		margin: calc($icon-margin * -1);
 		margin-left: 0;
 		color: var(--color-text-maxcontrast);