From fecb1310843b93596774d70214a17f6f62a31e7d Mon Sep 17 00:00:00 2001
From: Maja Zarkova <maja.zarkova@mail.schwarz>
Date: Mon, 27 May 2024 14:21:43 +0300
Subject: [PATCH] Fix styling

---
 .../sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx   | 6 +++---
 packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue | 7 ++-----
 .../src/components/OnyxTextarea/OnyxTextarea.ct.tsx      | 6 +++---
 .../src/components/OnyxTextarea/OnyxTextarea.vue         | 9 +++------
 4 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
index d169178eb..3b65cb0e0 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -85,11 +85,11 @@ test.describe("Screenshot tests", () => {
     },
     beforeScreenshot: async (component, page, _column, _row) => {
       const tooltip = page.getByRole("tooltip");
+      await tooltip.hover();
+
       await component.evaluate((element) => {
-        element.style.height = `10rem`;
+        element.style.paddingTop = `3rem`;
       });
-
-      await tooltip.hover();
     },
   });
 
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
index 5b1ab6f58..d11900e56 100644
--- a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
+++ b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -80,11 +80,8 @@ const { t } = injectI18n();
 
   <div v-else :class="['onyx-input', requiredTypeClass, densityClass]">
     <label>
-      <div
-        v-if="!props.hideLabel"
-        :class="['onyx-input__label', 'onyx-text--small', requiredMarkerClass]"
-      >
-        <div class="onyx-input__info-label">
+      <div v-if="!props.hideLabel" class="onyx-input__label onyx-text--small">
+        <div :class="['onyx-input__info-label', requiredMarkerClass]">
           <div class="onyx-truncation-ellipsis">{{ props.label }}</div>
           <OnyxTooltip v-if="props.infoLabel" open="hover" :text="props.infoLabel">
             <button
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
index ae283a7d9..668b921cc 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -231,11 +231,11 @@ test.describe("Screenshot tests", () => {
     },
     beforeScreenshot: async (component, page, _column, _row) => {
       const tooltip = page.getByRole("tooltip");
+      await tooltip.hover();
+
       await component.evaluate((element) => {
-        element.style.height = `15rem`;
+        element.style.paddingTop = `3rem`;
       });
-
-      await tooltip.hover();
     },
   });
 });
diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
index 60192b832..e6cc9a7dc 100644
--- a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
+++ b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -100,11 +100,8 @@ const handleInput = (event: Event) => {
     :style="autosizeMinMaxStyles"
   >
     <label>
-      <div
-        v-if="!props.hideLabel"
-        :class="['onyx-textarea__label', 'onyx-text--small', requiredMarkerClass]"
-      >
-        <div class="onyx-textarea__info-label">
+      <div v-if="!props.hideLabel" class="onyx-textarea__label onyx-text--small">
+        <div :class="['onyx-textarea__info-label', requiredMarkerClass]">
           <div class="onyx-truncation-ellipsis">{{ props.label }}</div>
           <OnyxTooltip
             v-if="props.infoLabel"
@@ -115,7 +112,7 @@ const handleInput = (event: Event) => {
             <button
               :aria-label="t('infoTooltip')"
               role="tooltip"
-              class="onyx-input__tooltip-trigger"
+              class="onyx-textarea__tooltip-trigger"
             >
               <OnyxIcon :icon="circleInformation" color="neutral" size="12px" />
             </button>