From b7590f119ca4ba5a498078b66c05bcd88441fae8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1s=20Palma?= <up202108880@edu.fe.up.pt>
Date: Thu, 5 Sep 2024 18:53:30 +0100
Subject: [PATCH] fix: options are now horizontal

---
 .../planner/sidebar/OptionsController.tsx     | 53 ++++++++++---------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/planner/sidebar/OptionsController.tsx b/src/components/planner/sidebar/OptionsController.tsx
index cf535d82..7b73ca14 100644
--- a/src/components/planner/sidebar/OptionsController.tsx
+++ b/src/components/planner/sidebar/OptionsController.tsx
@@ -14,32 +14,35 @@ 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 w-full">
+      <ReactSortable
+        className="m-y-2 gap-2 flex flex-row overflow-x-auto py-2 text-center w-full lg:justify-start"
+        direction='horizontal'
+        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>
   )
 }