From fec3741ef41abb1df8a1f0064deeed078ee652b2 Mon Sep 17 00:00:00 2001
From: Moritz Rengert <42251569+moritzrengert@users.noreply.github.com>
Date: Fri, 26 May 2023 12:44:54 +0200
Subject: [PATCH] Fix Progress Bar in in-App Survey Preview

---
 .../[environmentId]/surveys/PreviewSurvey.tsx | 41 ++++++++++---------
 apps/web/components/preview/Modal.tsx         |  2 +-
 2 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/apps/web/app/environments/[environmentId]/surveys/PreviewSurvey.tsx b/apps/web/app/environments/[environmentId]/surveys/PreviewSurvey.tsx
index 81d0ce9690..6e882a4f82 100644
--- a/apps/web/app/environments/[environmentId]/surveys/PreviewSurvey.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/PreviewSurvey.tsx
@@ -128,25 +128,28 @@ export default function PreviewSurvey({
 
       {previewType === "modal" ? (
         <Modal isOpen={isModalOpen}>
-          {(activeQuestionId || lastActiveQuestionId) === "thank-you-card" ? (
-            <ThankYouCard
-              brandColor={brandColor}
-              headline={thankYouCard?.headline || "Thank you!"}
-              subheader={thankYouCard?.subheader || "We appreciate your feedback."}
-            />
-          ) : (
-            questions.map((question, idx) =>
-              (activeQuestionId || lastActiveQuestionId) === question.id ? (
-                <QuestionConditional
-                  key={question.id}
-                  question={question}
-                  brandColor={brandColor}
-                  lastQuestion={idx === questions.length - 1}
-                  onSubmit={gotoNextQuestion}
-                />
-              ) : null
-            )
-          )}
+          <div className="px-4 py-6 sm:p-6">
+            {(activeQuestionId || lastActiveQuestionId) === "thank-you-card" ? (
+              <ThankYouCard
+                brandColor={brandColor}
+                headline={thankYouCard?.headline || "Thank you!"}
+                subheader={thankYouCard?.subheader || "We appreciate your feedback."}
+              />
+            ) : (
+              questions.map((question, idx) =>
+                (activeQuestionId || lastActiveQuestionId) === question.id ? (
+                  <QuestionConditional
+                    key={question.id}
+                    question={question}
+                    brandColor={brandColor}
+                    lastQuestion={idx === questions.length - 1}
+                    onSubmit={gotoNextQuestion}
+                  />
+                ) : null
+              )
+            )}
+          </div>
+          <Progress progress={progress} brandColor={brandColor} />
         </Modal>
       ) : (
         <div className="flex flex-grow flex-col">
diff --git a/apps/web/components/preview/Modal.tsx b/apps/web/components/preview/Modal.tsx
index e91654adbe..7ef7815e14 100644
--- a/apps/web/components/preview/Modal.tsx
+++ b/apps/web/components/preview/Modal.tsx
@@ -13,7 +13,7 @@ export default function Modal({ children, isOpen }: { children: ReactNode; isOpe
       <div
         className={cn(
           show ? "translate-x-0 opacity-100" : "translate-x-32 opacity-0",
-          "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg   bg-white px-4 py-6 shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out sm:p-6"
+          "pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg   bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out"
         )}>
         {children}
       </div>