From ff68dbb853648e2ce1a55ef9d8276c3f12880311 Mon Sep 17 00:00:00 2001
From: Mathias Skjulestad <msk@enonic.com>
Date: Fri, 19 Jun 2026 16:50:39 +0200
Subject: [PATCH] Long text overflows instead of wrapping in the TextArea #4546

Add missing width control to avoid overflow within a grid.
---
 .../js/form2/components/occurrence-list/OccurrenceList.tsx  | 6 +++---
 .../js/form2/components/text-area-input/TextAreaInput.tsx   | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/main/resources/assets/admin/common/js/form2/components/occurrence-list/OccurrenceList.tsx b/src/main/resources/assets/admin/common/js/form2/components/occurrence-list/OccurrenceList.tsx
index 672e9066f..f99136a3c 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/occurrence-list/OccurrenceList.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/occurrence-list/OccurrenceList.tsx
@@ -200,7 +200,7 @@ const OccurrenceListRoot = <C extends InputTypeConfig = InputTypeConfig>({
                 : errors.validationResults;
 
         return (
-            <div data-component={OCCURRENCE_LIST_NAME} className='grid gap-y-2'>
+            <div data-component={OCCURRENCE_LIST_NAME} className='grid min-w-0 gap-y-2'>
                 <InputLabel input={input} />
                 <Component
                     value={value}
@@ -260,7 +260,7 @@ const OccurrenceListRoot = <C extends InputTypeConfig = InputTypeConfig>({
         const showRemove = state.canRemove && state.values.length > 1;
 
         return (
-            <div data-component={OCCURRENCE_LIST_NAME} className='grid gap-y-2'>
+            <div data-component={OCCURRENCE_LIST_NAME} className='grid min-w-0 gap-y-2'>
                 <InputLabel input={input} />
                 <SortableGridList
                     items={state.values}
@@ -311,7 +311,7 @@ const OccurrenceListRoot = <C extends InputTypeConfig = InputTypeConfig>({
     }
 
     return (
-        <div data-component={OCCURRENCE_LIST_NAME} className='grid gap-y-2'>
+        <div data-component={OCCURRENCE_LIST_NAME} className='grid min-w-0 gap-y-2'>
             <InputLabel input={input} />
             <div className='flex flex-col gap-y-2.5'>
                 {state.values.map((_, i) => (
diff --git a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
index 8cfbdb811..76cc65447 100644
--- a/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
+++ b/src/main/resources/assets/admin/common/js/form2/components/text-area-input/TextAreaInput.tsx
@@ -81,6 +81,7 @@ export const TextAreaInput = ({
             error={getFirstError(errors)}
             maxLength={hasBoth ? undefined : maxLength}
             endAddon={counterAddon}
+            className='min-w-0'
         />
     );
 };