From 6afa4dbc21fb4f4c83029d630891525be1e026b9 Mon Sep 17 00:00:00 2001
From: Pradip Chaudhary <chaudharypradip.n@gmail.com>
Date: Sun, 8 Oct 2023 15:36:24 +0530
Subject: [PATCH] fix: fixed layout shift on form page change

---
 components/Dashboard/ReviewForm.tsx | 5 ++---
 styles/globals.css                  | 4 ++++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/components/Dashboard/ReviewForm.tsx b/components/Dashboard/ReviewForm.tsx
index 0cb318a0..5220d1e1 100644
--- a/components/Dashboard/ReviewForm.tsx
+++ b/components/Dashboard/ReviewForm.tsx
@@ -71,11 +71,11 @@ const ReviewForm: React.FC<ReviewFormProps> = (props) => {
           background: `linear-gradient(to top right, ${primaryColor}, ${bgColor})`,
         }}
       />
-      <div className="flex h-full w-full items-center justify-center overflow-y-auto p-4 py-10">
+      <div className="gutter_stable flex h-full w-full items-center justify-center overflow-y-auto p-4 py-10">
         {/* Design  */}
         {currentStepId === 'WELCOME_PAGE' && (
           <div className="relative w-full max-w-lg rounded-xl bg-white p-6 pt-4 shadow-lg">
-            <div className="absolute -top-3.5 right-3 flex dark:text-black items-center gap-2 rounded-full border bg-white px-4 py-1 text-sm">
+            <div className="absolute -top-3.5 right-3 flex items-center gap-2 rounded-full border bg-white px-4 py-1 text-sm dark:text-black">
               <HeartFilledIcon className="h-4 w-4" />
               Powered by Review
             </div>
@@ -143,7 +143,6 @@ const ReviewForm: React.FC<ReviewFormProps> = (props) => {
                 className="mt-4 resize-none"
                 rows={7}
                 required
-
               />
               <Button
                 style={{ background: primaryColor }}
diff --git a/styles/globals.css b/styles/globals.css
index b5883b3b..799128cc 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -95,3 +95,7 @@ body,
     transparent
   );
 }
+
+.gutter_stable {
+  scrollbar-gutter: stable;
+}