From 2c7d4999d894c0cb630e81254d6e209e4d1da77e Mon Sep 17 00:00:00 2001 From: Artem Zhukov Date: Fri, 26 Jul 2024 17:20:38 +0300 Subject: [PATCH 1/2] fix(feedback): Fix form width on mobile devices On mobile devices, the form looked narrow due to the unspecified value of the css variable --form-width. I set it to 100% for mobile devices and this stretched the form to the full width (see before/after screenshots). --- packages/feedback/src/modal/components/Dialog.css.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index 48e2a05716c2..8d268cbd5816 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -111,7 +111,7 @@ const FORM = ` @media (max-width: 600px) { .form__right { - width: auto; + --form-width: 100%; } } From 0ee7529446cdc6e9fd39f9746cb2fb2966cc898d Mon Sep 17 00:00:00 2001 From: Artem Zhukov Date: Fri, 26 Jul 2024 17:45:44 +0300 Subject: [PATCH 2/2] fix(feedback): Fix form width on mobile devices Improve css by using flex-basis: auto and width --- packages/feedback/src/modal/components/Dialog.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/feedback/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts index 8d268cbd5816..606e4764da1b 100644 --- a/packages/feedback/src/modal/components/Dialog.css.ts +++ b/packages/feedback/src/modal/components/Dialog.css.ts @@ -100,7 +100,7 @@ const FORM = ` } .form__right { - flex: 0 0 var(--form-width, 272px); + flex: 0 0 auto; width: var(--form-width, 272px); display: flex; overflow: auto; @@ -111,7 +111,7 @@ const FORM = ` @media (max-width: 600px) { .form__right { - --form-width: 100%; + width: var(--form-width, 100%); } }