From 5551f38761a878e3d3f40ff6bbdfe004ce12382a Mon Sep 17 00:00:00 2001
From: Christoph Wurst <christoph@winzerhof-wurst.at>
Date: Wed, 17 Jul 2024 13:53:20 +0200
Subject: [PATCH] fix(NcColorPicker): Make the color circle size clickable area
 agnostic

Signed-off-by: Christoph Wurst <christoph@winzerhof-wurst.at>
---
 .../NcColorPicker/NcColorPicker.vue           | 22 +++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/NcColorPicker/NcColorPicker.vue b/src/components/NcColorPicker/NcColorPicker.vue
index ddeb00892c..df93393355 100644
--- a/src/components/NcColorPicker/NcColorPicker.vue
+++ b/src/components/NcColorPicker/NcColorPicker.vue
@@ -59,7 +59,7 @@ export default {
 
 .color0 {
 	width: 100px;
-	height: 40px;
+	height: 34px;
 	border-radius: 6px;
 }
 </style>
@@ -98,7 +98,7 @@ export default {
 
 .color1 {
 	width: 100px;
-	height: 40px;
+	height: 34px;
 	margin-left: 20px;
 	border-radius: 6px;
 }
@@ -133,7 +133,7 @@ export default {
 
 .color0 {
 	width: 100px;
-	height: 40px;
+	height: 34px;
 	margin-left: 20px;
 	border-radius: 6px;
 }
@@ -433,9 +433,9 @@ export default {
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 34px;
-			height: 34px;
-			min-height: 34px;
+			width: calc(var(--default-clickable-area) - 10px);
+			height: calc(var(--default-clickable-area) - 10px);
+			min-height: calc(var(--default-clickable-area) - 10px);
 			margin: auto;
 			padding: 0;
 			color: white;
@@ -449,9 +449,9 @@ export default {
 				opacity: .6;
 			}
 			&--active {
-				width: 38px;
-				height: 38px;
-				min-height: 38px;
+				width: calc(var(--default-clickable-area) - 6px);
+				height: calc(var(--default-clickable-area) - 6px);
+				min-height: calc(var(--default-clickable-area) - 6px);
 				transition: all 100ms ease-in-out;
 				opacity: 1 !important;
 			}
@@ -481,8 +481,8 @@ export default {
 		}
 
 		&-active-color {
-			width: 34px;
-			height: 34px;
+			width: calc(var(--default-clickable-area) - 10 px);
+			height: calc(var(--default-clickable-area) - 10 px);
 			border-radius: 17px;
 		}