From 71bea12aa81977ee9849c7183373021e75b10664 Mon Sep 17 00:00:00 2001
From: Arno V <versini@gmail.com>
Date: Thu, 18 Apr 2024 11:14:31 -0400
Subject: [PATCH] fix(ui-styles): TextArea helper text is misaligned (#518)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Style Updates**
- Improved text area component layout: Labels now move above the field
when focused, and helper text is repositioned below the field for better
clarity and usability.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../plugins/tailwindcss/components/textArea.ts    | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/ui-styles/src/plugins/tailwindcss/components/textArea.ts b/packages/ui-styles/src/plugins/tailwindcss/components/textArea.ts
index 86706dee..eff992b8 100644
--- a/packages/ui-styles/src/plugins/tailwindcss/components/textArea.ts
+++ b/packages/ui-styles/src/plugins/tailwindcss/components/textArea.ts
@@ -1,18 +1,19 @@
 export default {
-	[`.av-text-area-wrapper label[aria-hidden="true"]`]: {
+	'.av-text-area-wrapper label[aria-hidden="true"]': {
 		/* move the label inline */
 		transform: "translate(18px, 0) scale(1)",
 		transformOrigin: "top left",
 		transition: "var(--av-text-area-wrapper-transition, all 0.2s ease-out)",
 	},
-	'.av-text-area:focus + label[aria-hidden="true"],\n\t.av-text-area:not(:placeholder-shown) + label[aria-hidden="true"]':
-		{
-			transform:
-				"translate(18px, var(--av-text-area-label, -25px)) scale(0.75)",
-		},
+	/* move the label above the field (on focus) */
+	[`.av-text-area:focus + label[aria-hidden="true"],
+	.av-text-area:not(:placeholder-shown) + label[aria-hidden="true"]`]: {
+		transform: "translate(18px, var(--av-text-area-label, -25px)) scale(0.75)",
+	},
+	/* move the helper text below the field */
 	".av-text-area-helper-text": {
 		transform:
-			"translate(18px, var(--av-text-area-helper-text, 32px))\n\t\t\tscale(0.75)",
+			"translate(12px, var(--av-text-area-helper-text, 32px)) scale(0.75)",
 		transformOrigin: "top left",
 	},
 	".av-text-area__control--right": {