fix: preview bugs (#2134)

2025-12-30 10:19:51 -06:00 · 2024-02-28 11:21:53 +05:30
parent 356d237e60
commit 078c5db2b0
9 changed files with 25 additions and 31 deletions
--- 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 }}
--- 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}
--- 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>
  );
 }
--- 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);
--- 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>];
--- 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}
--- 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
--- 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}
--- 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"