fix: scaling issues (#1825)

Co-authored-by: review-agent-prime[bot] <147289438+review-agent-prime[bot]@users.noreply.github.com>

apps/web/app/(app)/environments/[environmentId]/surveys/components/Modal.tsx

@@ -19,16 +19,52 @@ export default function Modal({
 }) {
   const [show, setShow] = useState(false);
   const modalRef = useRef<HTMLDivElement | null>(null);
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const calculateScaling = () => {
+    const scaleValue = (() => {
+      if (windowWidth > 1600) return "1";
+      else if (windowWidth > 1200) return ".9";
+      else if (windowWidth > 900) return ".8";
+      return "0.7";
+    })();
+
+    const getPlacementClass = (() => {
+      switch (placement) {
+        case "bottomLeft":
+          return "bottom left";
+        case "bottomRight":
+          return "bottom right";
+        case "topLeft":
+          return "top left";
+        case "topRight":
+          return "top right";
+        default:
+          return "";
+      }
+    })();
+
+    return {
+      transform: `scale(${scaleValue})`,
+      "transform-origin": getPlacementClass,
+    };
+  };
+  const scalingClasses = calculateScaling();
+
+  useEffect(() => {
+    const handleResize = () => setWindowWidth(window.innerWidth);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
 
   const highlightBorderColorStyle = useMemo(() => {
     if (!highlightBorderColor)
       return {
-        overflow: "visible",
+        overflow: "auto",
       };
 
     return {
       border: `2px solid ${highlightBorderColor}`,
-      overflow: "visible",
+      overflow: "auto",
     };
   }, [highlightBorderColor]);
 
@@ -58,7 +94,7 @@ export default function Modal({
     <div aria-live="assertive" className="relative h-full w-full overflow-visible bg-slate-300">
       <div
         ref={modalRef}
-        style={highlightBorderColorStyle}
+        style={{ ...highlightBorderColorStyle, ...scalingClasses }}
         className={cn(
           "no-scrollbar pointer-events-auto absolute h-fit max-h-[90%] w-full max-w-sm overflow-y-auto rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-500 ease-in-out ",
           previewMode === "desktop" ? getPlacementStyle(placement) : "max-w-full",

packages/surveys/src/components/questions/RatingQuestion.tsx

@@ -89,8 +89,8 @@ export default function RatingQuestion({
       {question.imageUrl && <QuestionImage imgUrl={question.imageUrl} />}
       <Headline headline={question.headline} questionId={question.id} required={question.required} />
       <Subheader subheader={question.subheader} questionId={question.id} />
-      <div className="mb-4 mt-8">
-        <fieldset>
+      <div className="mb-4 mt-8 flex items-center justify-center">
+        <fieldset className="w-full ">
           <legend className="sr-only">Choices</legend>
           <div className="flex">
             {Array.from({ length: question.range }, (_, i) => i + 1).map((number, i, a) => (
@@ -98,7 +98,7 @@ export default function RatingQuestion({
                 key={number}
                 onMouseOver={() => setHoveredNumber(number)}
                 onMouseLeave={() => setHoveredNumber(0)}
-                className="bg-survey-bg relative max-h-10 max-w-10 flex-1 cursor-pointer text-center text-sm leading-10">
+                className="bg-survey-bg max-w-10 relative max-h-10 flex-1 cursor-pointer text-center text-sm leading-10">
                 {question.scale === "number" ? (
                   <label
                     tabIndex={i + 1}