fix: textarea overflow

tablecheck · Mar 5, 2025 · b20e421 · b20e421
1 parent 0854487
commit b20e421
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/system/core/src/components/TextAreaWithIcons.ts b/system/core/src/components/TextAreaWithIcons.ts
@@ -20,7 +20,7 @@ export const fullStyles = css`
       var(--tk-input-icon-gap)
   );
   grid-template-columns:
-    var(--tk-input-icon-end-padding) var(--tk-input-icon-size) auto var(
+    var(--tk-input-icon-end-padding) var(--tk-input-icon-size) 1fr var(
       --tk-input-icon-size
     )
     var(--tk-input-icon-end-padding);

diff --git a/system/core/src/components/TextAreaWithPrefix.ts b/system/core/src/components/TextAreaWithPrefix.ts
@@ -21,7 +21,7 @@ export const fullStyles = css`
   );
   grid-template-columns:
     min-content
-    auto
+    1fr
     var(--tk-input-icon-gap)
     var(--tk-input-icon-size)
     var(--tk-input-icon-gap)

diff --git a/system/core/src/components/TextAreaWithSuffix.ts b/system/core/src/components/TextAreaWithSuffix.ts
@@ -24,7 +24,7 @@ export const fullStyles = css`
     var(--tk-input-icon-gap)
     var(--tk-input-icon-size)
     var(--tk-input-icon-gap)
-    auto
+    1fr
     min-content;
   grid-template-rows: var(--tk-textarea-height) auto;
   gap: 0;

diff --git a/system/stories/src/TextArea.stories.tsx b/system/stories/src/TextArea.stories.tsx
@@ -65,6 +65,25 @@ const getPropRows: (
     {
       prefix: <span>ZH-CN</span>,
       iconAfter
+    },
+    {
+      suffix: <span>.com</span>,
+      defaultValue: 'LongLongLongLongTextWithoutSpaces'
+    },
+    {
+      suffix: <span>@tablecheck.com</span>,
+      iconBefore,
+      'data-stretch': true,
+      defaultValue: 'LongLongLongLongTextWithoutSpaces'
+    },
+    {
+      prefix: <span>EN</span>,
+      defaultValue: 'LongLongLongLongTextWithoutSpaces'
+    },
+    {
+      prefix: <span>ZH-CN</span>,
+      iconAfter,
+      defaultValue: 'LongLongLongLongTextWithoutSpaces'
     }
   ];
 };