From 3e782a276676245bfc6a8f64bf92cf40f2848b46 Mon Sep 17 00:00:00 2001
From: Kateryna Tkachenko <kateryna.tkachenko@elsci.io>
Date: Mon, 25 Mar 2024 19:02:30 +0100
Subject: [PATCH] styles: error height, display of select-input

---
 package.json                     |  2 +-
 src/SelectInput/SelectInput.scss |  9 +++++++--
 src/TextInput/TextInput.scss     | 12 ++++++++----
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index f82e575..7edbd54 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsci-io/ui-essential",
-  "version": "1.0.53",
+  "version": "1.0.54",
   "description": "Material Design components created for products built by elsci.io",
   "main": "src/index.js",
   "type": "module",
diff --git a/src/SelectInput/SelectInput.scss b/src/SelectInput/SelectInput.scss
index 292cdb2..242c4bc 100644
--- a/src/SelectInput/SelectInput.scss
+++ b/src/SelectInput/SelectInput.scss
@@ -1,6 +1,12 @@
+select-input {
+    height: 4rem;
+    width: 100%;
+    display: inline-block;
+}
+
 select-input list-box {
     display: none;
-    margin-top: -0.625rem;
+    margin-top: -0.875rem;
 }
 
 select-input text-input {
@@ -10,4 +16,3 @@ select-input text-input {
 select-input text-input .text-input__trailing-icon{
     pointer-events: none;
 }
-
diff --git a/src/TextInput/TextInput.scss b/src/TextInput/TextInput.scss
index 4878465..8000746 100644
--- a/src/TextInput/TextInput.scss
+++ b/src/TextInput/TextInput.scss
@@ -2,17 +2,20 @@ text-input {
     /*We probably shouldn't do it, but the label can be declared outside of md-text-input when it relates
     to several fields at the time. So declaring the var at the root level for now.*/
     --text-input__small-font-size: .75rem;
+    /*We use another line height for errors because if line-height = font-size, error message is hidden at the bottom*/
+    --text-input__error-line-height: 1rem;
     --text-input__label__left-padding: .25rem;
     /*we need to use transform for labels, and they work only for absolutely positioned elements.
     And those in turn need some non-statically position parent - otherwise it'll be positioned relative
     to some other grand-parent and will fly away somewhere*/
     position: relative;
     /*leaving space for label to fly to when the field is active*/
-    padding-top: 1.5rem;
+    padding-top: 1.25rem;
     font-size: 1rem;
     /*  Html template of this component has its own style where "display : none" this trick allows element
      to be hidden until main css file is loaded */
     display: block;
+    overflow-x: clip;
 }
 
 .text-input__input {
@@ -23,7 +26,8 @@ text-input {
     border-bottom: 1px solid #DDD;
     /*when input is focused it has an outline which we don't want*/
     outline: none;
-    line-height: 1.5rem;
+    /* without line-height highlight in input looks better */
+    //line-height: 1.5rem;
     padding: .1rem 0 .1em var(--text-input__label__left-padding);
     font-size: 1rem;
     color: var(--theme-text-primary-on-light);
@@ -49,7 +53,7 @@ text-input.placeholder-shown .text-input__input::placeholder {
 .text-input__label {
     position: absolute;
     color: var(--theme-text-hint-on-light);
-    bottom: 2rem;
+    bottom: 2.25rem;
     left: 0;
     margin: 0;
 
@@ -97,7 +101,7 @@ text-input.placeholder-shown .text-input__label {
 .text-input__error {
     margin : 0;
     font-size: var(--text-input__small-font-size);
-    height: var(--text-input__small-font-size);
+    height: var(--text-input__error-line-height);
     color: var(--theme-input-border-error);
     padding-left: var(--text-input__label__left-padding);
 }