From b2271384bef6448a6e525b31997d4de2afd4e4c5 Mon Sep 17 00:00:00 2001
From: Kiarokh Moattar <kiarokh@icloud.com>
Date: Fri, 3 Nov 2023 16:49:38 +0100
Subject: [PATCH] fix(helper-line): when hidden, it should not have any height

---
 src/components/helper-line/helper-line.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/helper-line/helper-line.scss b/src/components/helper-line/helper-line.scss
index cbeb1c594b..8c5c2e24b2 100644
--- a/src/components/helper-line/helper-line.scss
+++ b/src/components/helper-line/helper-line.scss
@@ -4,7 +4,6 @@
     box-sizing: border-box;
     display: grid;
 
-    padding: 0.125rem 1rem 0 1rem;
     min-width: 0; // prevents overflowing, if component is placed in flex containers
 
     font-family: Roboto, sans-serif;
@@ -23,6 +22,7 @@ div {
     justify-content: space-between;
     gap: 0.75rem;
     overflow: hidden;
+    padding: 0 1rem;
 }
 
 :host(limel-helper-line.invalid) {
@@ -36,6 +36,11 @@ div {
     margin-left: auto;
 }
 
+.helper-text,
+.counter {
+    padding-top: 0.125rem;
+}
+
 // This animates height of the helper line, from `0` to `auto`.
 // To get this animation effect, the consumer component should
 // add `hide` classed accordingly.