fix(TextArea): long word is overflowing

.changeset/lucky-doors-wander.md

@@ -0,0 +1,5 @@
+---
+'@frontify/fondue-components': patch
+---
+
+Fix `Textarea` with `autosize` overflowing its container horizontally when the value contains a long word with no spaces.

packages/components/src/components/Textarea/__tests__/Textarea.ct.tsx

@@ -120,6 +120,20 @@ test('autosize functionality', async ({ mount }) => {
     await expect(component).toHaveAttribute('data-autosize', 'true');
 });
 
+test('autosize does not overflow its container on a long word without spaces', async ({ mount }) => {
+    const longWord = 'Helloeveryoneandwelcometomyveryverylongwordthatissolongthatitwillprobablyoverflowthecontainer';
+    const wrapper = await mount(
+        <div style={{ width: '200px' }}>
+            <Textarea data-test-id={`${TEXTAREA_TEST_ID}-long-word`} autosize value={longWord} />
+            <Textarea data-test-id={`${TEXTAREA_TEST_ID}-single-line`} autosize value="short" />
+        </div>,
+    );
+    const longWordComponent = wrapper.getByTestId(`${TEXTAREA_TEST_ID}-long-word`);
+    const wrappedBox = await longWordComponent.boundingBox();
+    const singleLineBox = await wrapper.getByTestId(`${TEXTAREA_TEST_ID}-single-line`).boundingBox();
+    expect(wrappedBox?.height ?? 0).toBeGreaterThan(singleLineBox?.height ?? 0);
+});
+
 test('render resize handle when resizable', async ({ mount }) => {
     const wrapper = await mount(<Textarea data-test-id={TEXTAREA_TEST_ID} resizable />);
     await expect(wrapper.getByTestId(`${TEXTAREA_TEST_ID}-resize-handle`)).toBeVisible();

packages/components/src/components/Textarea/styles/textarea.module.scss

@@ -98,6 +98,7 @@
 .root[data-autosize='true'] .textareaWrapper::after {
     content: attr(data-replicated-value) " ";
     white-space: pre-wrap;
+    overflow-wrap: anywhere;
     visibility: hidden;
     padding-inline-start: sizeToken.get(3);
     padding-inline-end: sizeToken.get(3);