diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index da12e3d70990..8459108d1fc2 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/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 {