add scroll indicator on iPhone

apps/web/components/preview/MultipleChoiceMultiQuestion.tsx

@@ -2,6 +2,7 @@ import { Input } from "@/../../packages/ui";
 import SubmitButton from "@/components/preview/SubmitButton";
 import { cn } from "@formbricks/lib/cn";
 import type { MultipleChoiceMultiQuestion } from "@formbricks/types/questions";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
 import { useEffect, useState } from "react";
 import Headline from "./Headline";
 import Subheader from "./Subheader";
@@ -23,11 +24,16 @@ export default function MultipleChoiceMultiQuestion({
   const [isAtLeastOneChecked, setIsAtLeastOneChecked] = useState(false);
   const [showOther, setShowOther] = useState(false);
   const [otherSpecified, setOtherSpecified] = useState("");
+  const [isIphone, setIsIphone] = useState(false);
 
   useEffect(() => {
     setIsAtLeastOneChecked(selectedChoices.length > 0 || otherSpecified.length > 0);
   }, [selectedChoices, otherSpecified]);
 
+  useEffect(() => {
+    setIsIphone(/iPhone|iPad|iPod/.test(navigator.userAgent));
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -56,7 +62,7 @@ export default function MultipleChoiceMultiQuestion({
       <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) => (
                 <>
@@ -118,6 +124,9 @@ export default function MultipleChoiceMultiQuestion({
                 </>
               ))}
           </div>
+          {isIphone && question.choices.length > 5 && (
+            <ChevronDownIcon className="mx-auto h-5 w-5 text-slate-400" />
+          )}
         </fieldset>
       </div>
       <input

packages/js/src/components/MultipleChoiceSingleQuestion.tsx

@@ -5,6 +5,7 @@ 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;
@@ -21,6 +22,7 @@ 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") {
@@ -28,6 +30,10 @@ export default function MultipleChoiceSingleQuestion({
     }
   }, [selectedChoice]);
 
+  useEffect(() => {
+    setIsIphone(/iPhone|iPad|iPod/.test(navigator.userAgent));
+  }, []);
+
   return (
     <form
       onSubmit={(e) => {
@@ -90,6 +96,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="fb-mt-4 fb-flex fb-w-full fb-justify-between">