From d90a1bb3c3106a3fd24b647e3ed4286fe74e7b62 Mon Sep 17 00:00:00 2001
From: lisa <llupi@scaleway.com>
Date: Wed, 19 Nov 2025 17:07:01 +0100
Subject: [PATCH] fix: tag input and text area size

---
 .changeset/quick-chefs-remain.md                     |  5 +++++
 packages/ui/src/components/TagInput/styles.css.ts    |  3 +++
 .../TextArea/__stories__/Examples.stories.tsx        | 12 ++++++++++++
 packages/ui/src/components/TextArea/index.tsx        |  5 ++++-
 packages/ui/src/components/TextArea/styles.css.ts    |  1 +
 5 files changed, 25 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/quick-chefs-remain.md

diff --git a/.changeset/quick-chefs-remain.md b/.changeset/quick-chefs-remain.md
new file mode 100644
index 0000000000..df8cfcaed5
--- /dev/null
+++ b/.changeset/quick-chefs-remain.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`TagInput` and `TextArea`: fix size
diff --git a/packages/ui/src/components/TagInput/styles.css.ts b/packages/ui/src/components/TagInput/styles.css.ts
index a9a7a95f89..a5606ede14 100644
--- a/packages/ui/src/components/TagInput/styles.css.ts
+++ b/packages/ui/src/components/TagInput/styles.css.ts
@@ -48,16 +48,19 @@ export const tagInputContainer = recipe({
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.large]} - 1px) ${
           theme.space['2']
         }`,
+        height: theme.sizing[600],
       },
       small: {
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.small]} - 1px) ${
           theme.space['1']
         }`,
+        height: theme.sizing[400],
       },
       medium: {
         padding: `calc(${theme.space[TAGINPUT_SIZE_PADDING.medium]} - 1px) ${
           theme.space['2']
         }`,
+        height: theme.sizing[500],
       },
     },
   },
diff --git a/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx b/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx
index ce4b8efb31..5ef9eb95e4 100644
--- a/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx
+++ b/packages/ui/src/components/TextArea/__stories__/Examples.stories.tsx
@@ -3,6 +3,8 @@ import { AlertCircleOutlineIcon } from '@ultraviolet/icons'
 import { useState } from 'react'
 import { Badge } from '../../Badge'
 import { Stack } from '../../Stack'
+import { Text } from '../../Text'
+import { TextInput } from '../../TextInput'
 import { Tooltip } from '../../Tooltip'
 import { TextArea } from '..'
 
@@ -13,6 +15,16 @@ export const Examples: StoryFn<typeof TextArea> = () => {
 
   return (
     <Stack gap={2}>
+      <Text as="div" variant="body">
+        Should be the same height as a TextInput when{' '}
+        <Text as="span" variant="code">
+          rows={1}
+        </Text>
+      </Text>
+      <Stack direction="row">
+        <TextArea label="textArea" onChange={setValue} rows={1} />
+        <TextInput label="textInput" />
+      </Stack>
       <TextArea
         label="Label"
         maxLength={200}
diff --git a/packages/ui/src/components/TextArea/index.tsx b/packages/ui/src/components/TextArea/index.tsx
index 1b9d338055..77e8c692fa 100644
--- a/packages/ui/src/components/TextArea/index.tsx
+++ b/packages/ui/src/components/TextArea/index.tsx
@@ -197,7 +197,10 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
               aria-invalid={!!error}
               aria-label={ariaLabel}
               autoFocus={autoFocus}
-              className={textAreaStyle({ error: !!error, success: !!success })}
+              className={textAreaStyle({
+                error: !!error,
+                success: !!success,
+              })}
               data-testid={dataTestId}
               disabled={disabled}
               id={id ?? localId}
diff --git a/packages/ui/src/components/TextArea/styles.css.ts b/packages/ui/src/components/TextArea/styles.css.ts
index 3ae709d90c..36538c57d7 100644
--- a/packages/ui/src/components/TextArea/styles.css.ts
+++ b/packages/ui/src/components/TextArea/styles.css.ts
@@ -18,6 +18,7 @@ export const textAreaClearableContainer = style({
 export const textArea = recipe({
   base: {
     width: '100%',
+    minHeight: theme.sizing[600],
     resize: 'vertical',
     background: theme.colors.neutral.background,
     border: `1px solid ${theme.colors.neutral.border}`,