fix(feeback): Handle css correctly in screenshot mode (#14535)

Author: chargome

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: var(--form-width, 272px);
+  width: 100%;
   max-height: 100%;
   overflow: auto;
 
@@ -72,12 +72,6 @@ const DIALOG = `
   transition: transform 0.2s ease-in-out;
 }
 
-@media (max-width: 600px) {
-  .dialog__content {
-    width: var(--form-width, 100%);
-  }
-}
-
 `;
 
 const DIALOG_HEADER = `
@@ -90,7 +84,20 @@ const DIALOG_HEADER = `
 }
 .dialog__title {
   align-self: center;
+  width: var(--form-width, 272px);
 }
+
+@media (max-width: 600px) {
+  .dialog__title {
+    width: auto;
+  }
+}
+
+.dialog__position:has(.editor) .dialog__title {
+  width: auto;
+}
+
+
 .brand-link {
   display: inline-flex;
 }
@@ -115,7 +122,11 @@ const FORM = `
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
-  width: 100%;
+  width: var(--form-width, 100%);
+}
+
+.dialog__position:has(.editor) .form__right {
+  width: var(--form-width, 272px);
 }
 
 .form__top {