fix: options are now horizontal

NIAEFEUP · Sep 5, 2024 · 0bd5ce1 · 0bd5ce1
1 parent 5ca88d4
commit 0bd5ce1
Showing 1 changed file with 27 additions and 25 deletions.
diff --git a/src/components/planner/sidebar/OptionsController.tsx b/src/components/planner/sidebar/OptionsController.tsx
@@ -14,32 +14,34 @@ const OptionsController = () => {
   const { multipleOptions, selectedOption, setSelectedOption, setMultipleOptions } = useContext(MultipleOptionsContext);
 
   return (
-    <ReactSortable
-      className="m-y-2 flex flex-row justify-center gap-2 overflow-x-auto py-2 text-center w-full lg:justify-start"
-      list={multipleOptions}
-      setList={(newMultipleOptions) => {
-        const prevId = multipleOptions[selectedOption].id;
-        setMultipleOptions(newMultipleOptions);
-        if (newMultipleOptions[selectedOption].id !== prevId) {
-          setSelectedOption(newMultipleOptions.findIndex((currentOption) => currentOption.id === prevId));
+    <div className="overflow-x-scroll">
+      <ReactSortable
+        className="m-y-2 flex flex-row justify-center gap-2 overflow-x-auto py-2 text-center w-full lg:justify-start"
+        list={multipleOptions}
+        setList={(newMultipleOptions) => {
+          const prevId = multipleOptions[selectedOption].id;
+          setMultipleOptions(newMultipleOptions);
+          if (newMultipleOptions[selectedOption].id !== prevId) {
+            setSelectedOption(newMultipleOptions.findIndex((currentOption) => currentOption.id === prevId));
+          }
         }
-      }
-      }
-      group="groupName"
-      animation={200}
-      delay={2}
-      multiDrag
-      onEnd={() => {
-        AnalyticsTracker.trackFeature(Feature.OPTION_REORDER);
-      }}
-    >
-      {multipleOptions.map((option: Option) => (
-        <OptionButton
-          key={multipleOptions.findIndex((currentOption) => currentOption.id === option.id)}
-          option={option}
-        />
-      ))}
-    </ReactSortable>
+        }
+        group="groupName"
+        animation={200}
+        delay={2}
+        multiDrag
+        onEnd={() => {
+          AnalyticsTracker.trackFeature(Feature.OPTION_REORDER);
+        }}
+      >
+        {multipleOptions.map((option: Option) => (
+          <OptionButton
+            key={multipleOptions.findIndex((currentOption) => currentOption.id === option.id)}
+            option={option}
+          />
+        ))}
+      </ReactSortable>
+    </div>
   )
 }