fix(feedback): Fix non-wrapping form title (#14355)

Fixes an issue with long form titles causing the width of the dialog to
expand. Instead, apply the css var `--form-width` to the dialog contents
so that the title wraps.

After:
<img width="323" alt="image"
src="https://github.com/user-attachments/assets/b2982b72-e9df-4459-8241-4b47f2fdd4fe">

 
<img width="558" alt="image"
src="https://github.com/user-attachments/assets/cd4a2285-7088-4bc1-b628-9672861a71f2">

Single line:
<img width="344" alt="image"
src="https://github.com/user-attachments/assets/1661ca0d-8cea-435c-86a8-cc56913d0483">


Closes #14351

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

@@ -60,7 +60,7 @@ const DIALOG = `
   gap: 16px;
   padding: var(--dialog-padding, 24px);
   max-width: 100%;
-  width: 100%;
+  width: var(--form-width, 272px);
   max-height: 100%;
   overflow: auto;
 
@@ -71,17 +71,26 @@ const DIALOG = `
   transform: translate(0, 0) scale(1);
   transition: transform 0.2s ease-in-out;
 }
+
+@media (max-width: 600px) {
+  .dialog__content {
+    width: var(--form-width, 100%);
+  }
+}
+
 `;
 
 const DIALOG_HEADER = `
 .dialog__header {
   display: flex;
-  align-items: center;
+  gap: 4px;
   justify-content: space-between;
   font-weight: var(--dialog-header-weight, 600);
   margin: 0;
 }
-
+.dialog__title {
+  align-self: center;
+}
 .brand-link {
   display: inline-flex;
 }
@@ -101,18 +110,12 @@ const FORM = `
 
 .form__right {
   flex: 0 0 auto;
-  width: var(--form-width, 272px);
   display: flex;
   overflow: auto;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
-}
-
-@media (max-width: 600px) {
-  .form__right {
-    width: var(--form-width, 100%);
-  }
+  width: 100%;
 }
 
 .form__top {

packages/feedback/src/modal/components/DialogHeader.tsx

@@ -14,7 +14,7 @@ export function DialogHeader({ options }: Props): VNode {
 
   return (
     <h2 class="dialog__header">
-      {options.formTitle}
+      <span class="dialog__title">{options.formTitle}</span>
       {options.showBranding ? (
         <a
           class="brand-link"