From 1f2b6b3adf7157dfda4b215554ad0219a8ac3ea4 Mon Sep 17 00:00:00 2001
From: Marco Ambrosini <marcoambrosini@proton.me>
Date: Wed, 3 Jul 2024 09:17:23 +0200
Subject: [PATCH] feat: Match input height with clickable area

Signed-off-by: Marco Ambrosini <marcoambrosini@proton.me>
---
 core/css/inputs.scss | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 06d542835d617..1b401555aa3a1 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -17,7 +17,6 @@ input, textarea, select, button, div[contenteditable=true], div[contenteditable=
 	background-image: unset !important;
 }
 
-$default-height: 36px;
 $opacity-disabled: .7;
 
 /* Simple selector to allow easy overriding */
@@ -32,7 +31,7 @@ textarea,
 div[contenteditable=true],
 div[contenteditable=false] {
 	width: 130px;
-	min-height: $default-height;
+	min-height: var(--default-clickable-area);
 	box-sizing: border-box;
 }
 
@@ -175,7 +174,7 @@ input {
 		-moz-appearance: textfield;
 		appearance: textfield;
 		// force height for inline elements like inputs (not textarea, contenteditable...)
-		height: $default-height;
+		height: var(--default-clickable-area);
 	}
 	&[type='radio'],
 	&[type='checkbox'],
@@ -215,7 +214,7 @@ input[type='reset'] {
 	padding: 8px 14px;
 	font-size: var(--default-font-size);
 	width: auto;
-	min-height: $default-height;
+	min-height: var(--default-clickable-area);
 	cursor: pointer;
 	box-sizing: border-box;
 	background-color: var(--color-background-dark);
@@ -352,8 +351,8 @@ input {
 			/* Avoid background under border */
 			background-color: var(--color-main-background) !important;
 			opacity: 1;
-			height: $default-height;
-			width: $default-height;
+			height: var(--default-clickable-area);
+			width: var(--default-clickable-area);
 			padding: 7px 6px;
 			cursor: pointer;
 			margin-right: 0;