fix single question

apps/web/components/preview/MultipleChoiceSingleQuestion.tsx

@@ -2,9 +2,10 @@ import { Input } from "@/../../packages/ui";
 import SubmitButton from "@/components/preview/SubmitButton";
 import { cn } from "@formbricks/lib/cn";
 import type { MultipleChoiceSingleQuestion } from "@formbricks/types/questions";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
 
 interface MultipleChoiceSingleProps {
   question: MultipleChoiceSingleQuestion;
@@ -20,6 +21,11 @@ export default function MultipleChoiceSingleQuestion({
   brandColor,
 }: MultipleChoiceSingleProps) {
   const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
+  const [isIphone, setIsIphone] = useState(false);
+
+  useEffect(() => {
+    setIsIphone(/iPhone|iPad|iPod/.test(navigator.userAgent));
+  }, []);
 
   return (
     <form
@@ -37,7 +43,7 @@ export default function MultipleChoiceSingleQuestion({
       <div className="mt-4">
         <fieldset>
           <legend className="sr-only">Options</legend>
-          <div className="relative max-h-[42vh] space-y-2 overflow-y-auto rounded-md py-1 pr-2">
+          <div className="relative max-h-[42vh] space-y-2 overflow-y-auto rounded-md py-0.5 pr-2">
             {question.choices &&
               question.choices.map((choice, idx) => (
                 <label
@@ -77,6 +83,9 @@ export default function MultipleChoiceSingleQuestion({
                 </label>
               ))}
           </div>
+          {isIphone && question.choices.length > 5 && (
+            <ChevronDownIcon className="mx-auto h-5 w-5 text-slate-400" />
+          )}
         </fieldset>
       </div>
       <div className="mt-4 flex w-full justify-between">

packages/js/src/components/MultipleChoiceSingleQuestion.tsx

@@ -5,7 +5,6 @@ import type { MultipleChoiceSingleQuestion } from "../../../types/questions";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
 import SubmitButton from "./SubmitButton";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
 
 interface MultipleChoiceSingleProps {
   question: MultipleChoiceSingleQuestion;
@@ -22,7 +21,6 @@ export default function MultipleChoiceSingleQuestion({
 }: MultipleChoiceSingleProps) {
   const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
   const otherSpecify = useRef<HTMLInputElement>(null);
-  const [isIphone, setIsIphone] = useState(false);
 
   useEffect(() => {
     if (selectedChoice === "other") {
@@ -30,10 +28,6 @@ export default function MultipleChoiceSingleQuestion({
     }
   }, [selectedChoice]);
 
-  useEffect(() => {
-    setIsIphone(/iPhone|iPad|iPod/.test(navigator.userAgent));
-  }, []);
-
   return (
     <form
       onSubmit={(e) => {
@@ -96,9 +90,6 @@ export default function MultipleChoiceSingleQuestion({
                 </label>
               ))}
           </div>
-          {isIphone && question.choices.length > 5 && (
-            <ChevronDownIcon className="mx-auto h-5 w-5 text-slate-400" />
-          )}
         </fieldset>
       </div>
       <div className="fb-mt-4 fb-flex fb-w-full fb-justify-between">