fix: fixed layout shift on form page change

piyushgarg-dev · Oct 8, 2023 · 6afa4db · 6afa4db
1 parent c2dce87
commit 6afa4db
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git 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
@@ -95,3 +95,7 @@ body,
     transparent
   );
 }
+
+.gutter_stable {
+  scrollbar-gutter: stable;
+}