fix(web-components): TextArea overflow scrolling in Firefox (#36621)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: dmytrokirpa <1492102+dmytrokirpa@users.noreply.github.com>
Co-authored-by: Dmytro Kirpa <dmytrokirpa@microsoft.com>

Author: Copilot

change/@fluentui-web-components-df712a29-ed4d-4db3-9714-e3d14fc4a2bb.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: show TextArea scrollbar for overflowing content",
+  "packageName": "@fluentui/web-components",
+  "email": "198982749+Copilot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/textarea/textarea.spec.ts

@@ -242,6 +242,15 @@ test.describe('TextArea', () => {
       await expect(element).not.toHaveCustomState('user-valid');
       await expect(element).toHaveCustomState('user-invalid');
     });
+
+    test('should allow the control to scroll overflowing content', async ({ fastPage }) => {
+      const { element } = fastPage;
+      const control = element.locator('textarea');
+
+      await fastPage.setTemplate();
+
+      await expect(control).toHaveCSS('overflow', 'auto');
+    });
   });
 
   test.describe('internal label', () => {

packages/web-components/src/textarea/textarea.styles.css

@@ -221,6 +221,7 @@ label[hidden] {
   field-sizing: content;
   max-block-size: 100%;
   outline: 0;
+  overflow: auto;
   resize: none;
   text-align: inherit;
 }

packages/web-components/src/textarea/textarea.styles.ts

@@ -269,6 +269,7 @@ export const styles: ElementStyles = css`
     field-sizing: content;
     max-block-size: 100%;
     outline: 0;
+    overflow: auto;
     resize: none;
     text-align: inherit;
   }