fix: question form card width issue (#2811)

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/LogicEditor.tsx

@@ -285,11 +285,13 @@ export const LogicEditor = ({
         <div className="mt-2 space-y-3">
           {question?.logic?.map((logic, logicIdx) => (
             <div key={logicIdx} className="flex items-center space-x-2 space-y-1 text-xs xl:text-sm">
-              <CornerDownRightIcon className="h-4 w-4" />
+              <div>
+                <CornerDownRightIcon className="h-4 w-4" />
+              </div>
               <p className="text-slate-800">If this answer</p>
 
               <Select value={logic.condition} onValueChange={(e) => updateLogic(logicIdx, { condition: e })}>
-                <SelectTrigger className=" min-w-fit flex-1">
+                <SelectTrigger className="min-w-fit flex-1">
                   <SelectValue placeholder="Select condition" className="text-xs lg:text-sm" />
                 </SelectTrigger>
                 <SelectContent>
@@ -367,7 +369,7 @@ export const LogicEditor = ({
               <Select
                 value={logic.destination}
                 onValueChange={(e) => updateLogic(logicIdx, { destination: e })}>
-                <SelectTrigger className="w-fit overflow-hidden ">
+                <SelectTrigger className="w-fit overflow-hidden">
                   <SelectValue placeholder="Select question" />
                 </SelectTrigger>
                 <SelectContent>
@@ -391,11 +393,12 @@ export const LogicEditor = ({
                   <SelectItem value="end">End of survey</SelectItem>
                 </SelectContent>
               </Select>
-
-              <TrashIcon
-                className="h-4 w-4 cursor-pointer text-slate-400"
-                onClick={() => deleteLogic(logicIdx)}
-              />
+              <div>
+                <TrashIcon
+                  className="h-4 w-4 cursor-pointer text-slate-400"
+                  onClick={() => deleteLogic(logicIdx)}
+                />
+              </div>
             </div>
           ))}
           <div className="flex flex-wrap items-center space-x-2 py-1 text-sm">

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionCard.tsx

@@ -136,7 +136,7 @@ export const QuestionCard = ({
     <div
       className={cn(
         open ? "scale-100 shadow-lg" : "scale-97 shadow-md",
-        "flex flex-row rounded-lg bg-white transition-all duration-300 ease-in-out"
+        "flex w-full flex-row rounded-lg bg-white transition-all duration-300 ease-in-out"
       )}
       ref={setNodeRef}
       style={style}
@@ -146,13 +146,13 @@ export const QuestionCard = ({
         {...attributes}
         className={cn(
           open ? "bg-slate-700" : "bg-slate-400",
-          "top-0 w-10 rounded-l-lg p-2 text-center text-sm text-white hover:cursor-grab hover:bg-slate-600",
-          isInvalid && "bg-red-400  hover:bg-red-600",
+          "top-0 w-[5%] rounded-l-lg p-2 text-center text-sm text-white hover:cursor-grab hover:bg-slate-600",
+          isInvalid && "bg-red-400 hover:bg-red-600",
           "flex flex-col items-center justify-between"
         )}>
         <span>{questionIdx + 1}</span>
 
-        <button className="hidden hover:cursor-move group-hover:block">
+        <button className="opacity-0 hover:cursor-move group-hover:opacity-100">
           <GripIcon className="h-4 w-4" />
         </button>
       </div>
@@ -165,10 +165,10 @@ export const QuestionCard = ({
             setActiveQuestionId(null);
           }
         }}
-        className="flex-1 rounded-r-lg border border-slate-200">
+        className="w-[95%] flex-1 rounded-r-lg border border-slate-200">
         <Collapsible.CollapsibleTrigger
           asChild
-          className={cn(open ? "" : "  ", "flex cursor-pointer justify-between gap-4 p-4 hover:bg-slate-50")}>
+          className={cn(open ? "" : " ", "flex cursor-pointer justify-between gap-4 p-4 hover:bg-slate-50")}>
           <div>
             <div className="flex grow">
               <div className="-ml-0.5 mr-3 h-6 min-w-[1.5rem] text-slate-400">

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsDroppable.tsx

@@ -40,7 +40,7 @@ export const QuestionsDroppable = ({
   isFormbricksCloud,
 }: QuestionsDraggableProps) => {
   return (
-    <div className="group mb-5 grid w-full gap-5">
+    <div className="group mb-5 flex w-full flex-col gap-5">
       <SortableContext items={localSurvey.questions} strategy={verticalListSortingStrategy}>
         {localSurvey.questions.map((question, questionIdx) => (
           <QuestionCard

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/QuestionsView.tsx

@@ -335,8 +335,8 @@ export const QuestionsView = ({
   };
 
   return (
-    <div className="mt-16 px-5 py-4">
-      <div className="mb-5 flex flex-col gap-5">
+    <div className="mt-16 w-full px-5 py-4">
+      <div className="mb-5 flex w-full flex-col gap-5">
         <EditWelcomeCard
           localSurvey={localSurvey}
           setLocalSurvey={setLocalSurvey}

apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyEditor.tsx

@@ -126,7 +126,7 @@ export const SurveyEditor = ({
 
   return (
     <>
-      <div className="flex h-full flex-col">
+      <div className="flex h-full w-full flex-col">
         <SurveyMenuBar
           setLocalSurvey={setLocalSurvey}
           localSurvey={localSurvey}
@@ -141,7 +141,9 @@ export const SurveyEditor = ({
           setSelectedLanguageCode={setSelectedLanguageCode}
         />
         <div className="relative z-0 flex flex-1 overflow-hidden">
-          <main className="relative z-0 flex-1      overflow-y-auto focus:outline-none" ref={surveyEditorRef}>
+          <main
+            className="relative z-0 w-1/2 flex-1 overflow-y-auto focus:outline-none"
+            ref={surveyEditorRef}>
             <QuestionsAudienceTabs
               activeId={activeView}
               setActiveId={setActiveView}