fix(feedback): Wrap long error messages in the feedback dialog

packages/feedback/src/modal/components/Dialog.css.ts

@@ -144,6 +144,7 @@ const FORM = `
 .form__error-container {
   color: var(--error-color);
   fill: var(--error-color);
+  overflow-wrap: break-word;
 }
 
 .form__label {

packages/feedback/test/modal/components/Dialog.css.test.ts

@@ -0,0 +1,42 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { describe, expect, it } from 'vitest';
+import { createDialogStyles } from '../../../src/modal/components/Dialog.css';
+
+/**
+ * Returns the declarations inside the first rule block matching `selector`, so
+ * assertions target one rule rather than the whole stylesheet.
+ */
+function getRuleBlock(css: string, selector: string): string {
+  const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const match = new RegExp(`^${escaped}\\s*\\{([^}]*)\\}`, 'm').exec(css);
+  return match ? match[1] : '';
+}
+
+describe('createDialogStyles', () => {
+  it('lets long error messages wrap instead of overflowing the dialog', () => {
+    const css = createDialogStyles().textContent ?? '';
+    const rule = getRuleBlock(css, '.form__error-container');
+
+    // Guard: if the selector is renamed, fail loudly rather than pass vacuously.
+    expect(rule).not.toBe('');
+    // `FeedbackErrorMessages` lets integrators supply arbitrary error copy, and
+    // the container is only 272px wide while the screenshot editor is open, so a
+    // single long token must be breakable.
+    expect(rule).toMatch(/overflow-wrap:\s*break-word/);
+  });
+
+  it('keeps the error colour tokens on the same rule', () => {
+    const css = createDialogStyles().textContent ?? '';
+    const rule = getRuleBlock(css, '.form__error-container');
+
+    expect(rule).toMatch(/color:\s*var\(--error-color\)/);
+    expect(rule).toMatch(/fill:\s*var\(--error-color\)/);
+  });
+
+  it('applies the nonce when one is supplied', () => {
+    expect(createDialogStyles('abc123').getAttribute('nonce')).toBe('abc123');
+    expect(createDialogStyles().hasAttribute('nonce')).toBe(false);
+  });
+});