From 078c5db2b0ca9e10d020642c30fd73ca0462aa0f Mon Sep 17 00:00:00 2001
From: Dhruwang Jariwala <67850763+Dhruwang@users.noreply.github.com>
Date: Wed, 28 Feb 2024 11:21:53 +0530
Subject: [PATCH] fix: preview bugs (#2134)

---
 .../surveys/components/Modal.tsx              |  2 +-
 .../surveys/components/PreviewSurvey.tsx      |  4 ++--
 .../src/components/general/CalEmbed.tsx       |  4 ++--
 .../src/components/general/FileInput.tsx      |  2 +-
 .../src/components/general/Smileys.tsx        | 24 +++++++++----------
 .../questions/MultipleChoiceMultiQuestion.tsx |  2 +-
 .../MultipleChoiceSingleQuestion.tsx          |  2 +-
 .../questions/PictureSelectionQuestion.tsx    |  2 +-
 .../components/questions/RatingQuestion.tsx   | 14 ++++-------
 9 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx
index 11f5374014..4811fc1ced 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx
@@ -99,7 +99,7 @@ export default function Modal({
         : "";
 
   return (
-    <div aria-live="assertive" className="relative h-full w-full bg-slate-300">
+    <div aria-live="assertive" className="relative h-full w-full overflow-hidden bg-slate-300">
       <div
         ref={modalRef}
         style={{ ...highlightBorderColorStyle, ...scalingClasses }}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
index 06c2b98698..5cee0499fa 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurvey.tsx
@@ -216,8 +216,8 @@ export default function PreviewSurvey({
                   />
                 </Modal>
               ) : (
-                <div className="px-4">
-                  <div className="no-scrollbar z-10 max-h-[500px] w-full max-w-md overflow-y-auto rounded-lg border border-transparent">
+                <div className="w-full px-4">
+                  <div className="no-scrollbar z-10 w-full max-w-md overflow-y-auto rounded-lg border border-transparent">
                     <SurveyInline
                       survey={survey}
                       brandColor={brandColor}
diff --git a/packages/surveys/src/components/general/CalEmbed.tsx b/packages/surveys/src/components/general/CalEmbed.tsx
index b6c376d951..e49c93a97a 100644
--- a/packages/surveys/src/components/general/CalEmbed.tsx
+++ b/packages/surveys/src/components/general/CalEmbed.tsx
@@ -49,8 +49,8 @@ export default function CalEmbed({ question, onSuccessfulBooking }: CalEmbedProp
   }, [cal, question.calUserName]);
 
   return (
-    <div className="relative mt-4">
-      <div id="fb-cal-embed" className={cn("h-96 overflow-auto rounded-lg border border-slate-200")} />
+    <div className="relative mt-4 max-h-[30vh] overflow-auto">
+      <div id="fb-cal-embed" className={cn("rounded-lg border border-slate-200")} />
     </div>
   );
 }
diff --git a/packages/surveys/src/components/general/FileInput.tsx b/packages/surveys/src/components/general/FileInput.tsx
index 732f5d46c5..b802d36d4f 100644
--- a/packages/surveys/src/components/general/FileInput.tsx
+++ b/packages/surveys/src/components/general/FileInput.tsx
@@ -203,7 +203,7 @@ export default function FileInput({
 
   return (
     <div className="items-left relative mt-3 flex w-full cursor-pointer flex-col justify-center rounded-lg border-2 border-dashed border-slate-300 bg-slate-50 hover:cursor-pointer hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-700 dark:hover:border-slate-500 dark:hover:bg-slate-800">
-      <div className="max-h-[40vh] overflow-auto">
+      <div className="max-h-[30vh] overflow-auto">
         {fileUrls &&
           fileUrls?.map((file, index) => {
             const fileName = getOriginalFileNameFromUrl(file);
diff --git a/packages/surveys/src/components/general/Smileys.tsx b/packages/surveys/src/components/general/Smileys.tsx
index f5096e56cb..e779014690 100644
--- a/packages/surveys/src/components/general/Smileys.tsx
+++ b/packages/surveys/src/components/general/Smileys.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent } from "preact";
 
 export const TiredFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -64,7 +64,7 @@ export const TiredFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>>
 
 export const WearyFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -125,7 +125,7 @@ export const WearyFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>>
 
 export const PerseveringFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -195,7 +195,7 @@ export const PerseveringFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElem
 
 export const FrowningFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -225,7 +225,7 @@ export const FrowningFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement
 
 export const ConfusedFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -254,7 +254,7 @@ export const ConfusedFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement
 
 export const NeutralFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -287,7 +287,7 @@ export const NeutralFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>
 
 export const SlightlySmilingFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -319,7 +319,7 @@ export const SmilingFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<SV
   props
 ) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -365,7 +365,7 @@ export const GrinningFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<S
   props
 ) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -417,7 +417,7 @@ export const GrinningFaceWithSmilingEyes: FunctionComponent<JSX.HTMLAttributes<S
 
 export const GrinningSquintingFace: FunctionComponent<JSX.HTMLAttributes<SVGCircleElement>> = (props) => {
   return (
-    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}>
+    <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
       <g id="line">
         <circle
           cx="36"
@@ -468,6 +468,4 @@ export const GrinningSquintingFace: FunctionComponent<JSX.HTMLAttributes<SVGCirc
   );
 };
 
-export let icons = [
-  <svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg" width={48} height={48}></svg>,
-];
+export let icons = [<svg viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg"></svg>];
diff --git a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
index b61145e786..73f2249a30 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceMultiQuestion.tsx
@@ -127,7 +127,7 @@ export default function MultipleChoiceMultiQuestion({
       <div className="mt-4">
         <fieldset>
           <legend className="sr-only">Options</legend>
-          <div className="bg-survey-bg relative max-h-[42vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2">
+          <div className="bg-survey-bg relative max-h-[30vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2">
             {questionChoices.map((choice, idx) => (
               <label
                 key={choice.id}
diff --git a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
index f876a3738c..702cdd1a12 100644
--- a/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
+++ b/packages/surveys/src/components/questions/MultipleChoiceSingleQuestion.tsx
@@ -86,7 +86,7 @@ export default function MultipleChoiceSingleQuestion({
           <legend className="sr-only">Options</legend>
 
           <div
-            className="bg-survey-bg relative max-h-[42vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2"
+            className="bg-survey-bg relative max-h-[30vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2"
             role="radiogroup">
             {questionChoices.map((choice, idx) => (
               <label
diff --git a/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx b/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
index abe636d356..463867602f 100644
--- a/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
+++ b/packages/surveys/src/components/questions/PictureSelectionQuestion.tsx
@@ -102,7 +102,7 @@ export default function PictureSelectionQuestion({
       <div className="mt-4">
         <fieldset>
           <legend className="sr-only">Options</legend>
-          <div className="rounded-m bg-survey-bg relative grid max-h-[42vh] grid-cols-2 gap-x-5 gap-y-4 overflow-y-auto pr-2.5">
+          <div className="rounded-m bg-survey-bg relative grid max-h-[30vh] grid-cols-2 gap-x-5 gap-y-4 overflow-y-auto">
             {questionChoices.map((choice, idx) => (
               <label
                 key={choice.id}
diff --git a/packages/surveys/src/components/questions/RatingQuestion.tsx b/packages/surveys/src/components/questions/RatingQuestion.tsx
index 76986d3836..885c1cf316 100644
--- a/packages/surveys/src/components/questions/RatingQuestion.tsx
+++ b/packages/surveys/src/components/questions/RatingQuestion.tsx
@@ -95,9 +95,9 @@ export default function RatingQuestion({
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
       <div className="mb-4 mt-6 flex items-center justify-center">
-        <fieldset className="w-full ">
+        <fieldset className="w-full">
           <legend className="sr-only">Choices</legend>
-          <div className="flex pb-2">
+          <div className="flex w-full pb-2">
             {Array.from({ length: question.range }, (_, i) => i + 1).map((number, i, a) => (
               <span
                 key={number}
@@ -131,7 +131,7 @@ export default function RatingQuestion({
                       }
                     }}
                     className={cn(
-                      "flex h-full w-full justify-center focus:outline-none",
+                      "flex max-h-16 justify-center focus:outline-none",
                       number <= hoveredNumber || number <= (value as number)
                         ? "text-amber-400"
                         : "text-slate-300",
@@ -140,11 +140,7 @@ export default function RatingQuestion({
                     onFocus={() => setHoveredNumber(number)}
                     onBlur={() => setHoveredNumber(0)}>
                     <HiddenRadioInput number={number} />
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      viewBox="0 0 24 24"
-                      fill="currentColor"
-                      className="h-14 max-h-full w-14">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                       <path
                         fillRule="evenodd"
                         d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"
@@ -154,7 +150,7 @@ export default function RatingQuestion({
                 ) : (
                   <label
                     className={cn(
-                      "flex h-full w-full justify-center",
+                      "flex max-h-16 justify-center",
                       value === number || hoveredNumber === number
                         ? "stroke-rating-selected text-rating-selected"
                         : "stroke-heading text-heading"