From c639e5dc808e83b0f8afb99b9acc63b4f4e37376 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9s=20Gonz=C3=A1lez?=
 <andres.gonzalez@vizzuality.com>
Date: Mon, 11 Mar 2024 15:54:30 +0100
Subject: [PATCH] adds scroll to PU form in small viewports

---
 .../planning-unit-status/actions/index.tsx    |  47 +++----
 .../grid-setup/planning-unit-status/index.tsx | 119 ++++++++----------
 2 files changed, 78 insertions(+), 88 deletions(-)

diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
index 94213c0c67..6f6ae20877 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions/index.tsx
@@ -11,6 +11,7 @@ import { useSaveScenarioPU } from 'hooks/scenarios';
 import { useToasts } from 'hooks/toast';
 
 import Select from 'components/forms/select';
+import { ScrollArea } from 'components/scroll-area';
 import ActionsSummary from 'layout/project/sidebar/scenario/grid-setup/planning-unit-status/actions-summary';
 
 import DrawPUMethod from './draw';
@@ -107,8 +108,8 @@ export const PlanningUnitMethods = () => {
           },
         },
         {
-          onSuccess: ({ data: { meta } }) => {
-            dispatch(setJob(new Date(meta.isoDate).getTime()));
+          onSuccess: ({ data }) => {
+            dispatch(setJob(new Date(data.meta.isoDate).getTime()));
 
             dispatch(setTmpPuExcludedValue([]));
             dispatch(setTmpPuIncludedValue([]));
@@ -186,26 +187,30 @@ export const PlanningUnitMethods = () => {
           <form
             onSubmit={handleSubmit}
             autoComplete="off"
-            className="flex flex-grow flex-col space-y-4 text-black"
+            className="relative flex  w-full flex-grow flex-col space-y-4 overflow-hidden text-black"
           >
-            <FieldRFF name="pu-method">
-              {(fprops) => (
-                <Select
-                  {...fprops}
-                  size="base"
-                  theme="dark"
-                  placeholder="Select..."
-                  options={PU_METHODS}
-                  onChange={(value: (typeof PU_METHODS)[number]['value']) => {
-                    form.change('pu-method', value);
-                  }}
-                />
-              )}
-            </FieldRFF>
-            {values['pu-method'] === 'select' && <SelectPUMethod />}
-            {values['pu-method'] === 'draw' && <DrawPUMethod />}
-            {values['pu-method'] === 'upload' && <UploadPUMethod />}
-            <ActionsSummary method={values['pu-method']} />
+            <ScrollArea className="h-full pr-3">
+              <div className="space-y-4 px-0.5 pt-3">
+                <FieldRFF name="pu-method">
+                  {(fprops) => (
+                    <Select
+                      {...fprops}
+                      size="base"
+                      theme="dark"
+                      placeholder="Select..."
+                      options={PU_METHODS}
+                      onChange={(value: (typeof PU_METHODS)[number]['value']) => {
+                        form.change('pu-method', value);
+                      }}
+                    />
+                  )}
+                </FieldRFF>
+                {values['pu-method'] === 'select' && <SelectPUMethod />}
+                {values['pu-method'] === 'draw' && <DrawPUMethod />}
+                {values['pu-method'] === 'upload' && <UploadPUMethod />}
+                <ActionsSummary method={values['pu-method']} />
+              </div>
+            </ScrollArea>
           </form>
         );
       }}
diff --git a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
index bb3da904a3..22ba5b7ad6 100644
--- a/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
+++ b/app/layout/project/sidebar/scenario/grid-setup/planning-unit-status/index.tsx
@@ -6,8 +6,6 @@ import { useAppDispatch, useAppSelector } from 'store/hooks';
 import { getScenarioEditSlice } from 'store/slices/scenarios/edit';
 import { PUAction } from 'store/slices/scenarios/types';
 
-import { motion } from 'framer-motion';
-
 import { useCanEditScenario } from 'hooks/permissions';
 import { useScenarioPU } from 'hooks/scenarios';
 
@@ -70,73 +68,60 @@ export const GridSetupPlanningUnits = (): JSX.Element => {
   }, [dispatch, setLayerSettings]);
 
   return (
-    <motion.div
-      key="gap-analysis"
-      className="flex min-h-0 flex-col items-start justify-start overflow-hidden"
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      <Section className="w-full">
-        <div className="space-y-1">
-          <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
-          <div className="flex items-center space-x-2">
-            <h3 className="text-lg font-medium">Planning Unit Status</h3>
-            <InfoButton theme="primary" className="bg-gray-500">
-              <>
-                <h4 className="mb-2.5 font-heading text-lg">
-                  Locked-in and locked-out planning units
-                </h4>
-                <div className="space-y-2">
-                  <p>
-                    You can force Marxan to include or exclude some planning units from your
-                    analysis.
-                  </p>
-                  <p>
-                    Manually including or excluding individual planning units is useful when a
-                    real-world issue affects where new protected areas can be designated. For
-                    example, if you know that a particular planning unit contains a restricted
-                    military area and cannot be designated, then you could manually exclude that
-                    planning unit from the project.
-                  </p>
-                  <p>
-                    You can see the example below where a city is marked as locked-out and a
-                    protected area is marked as locked-in:
-                  </p>
-                  <img src={LOCK_IN_OUT_IMG} alt="Feature-Range" />
-                  <p>
-                    The areas selected to be included will be <b>locked in </b>
-                    to your conservation plan and will appear in all of the solutions.
-                  </p>
-                  <p>
-                    The areas selected to be excluded will be <b>locked out </b>
-                    of your conservation plan and will never appear in the solutions
-                  </p>
-                </div>
-              </>
-            </InfoButton>
-          </div>
-        </div>
-
-        <div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-700">
-          <Tabs type={puAction as PUAction} onChange={onChangeTab} />
-        </div>
-
-        <div className="relative flex min-h-0 w-full flex-grow flex-col overflow-hidden">
-          <div className="relative overflow-y-auto overflow-x-visible px-0.5 pt-3">
-            {editable && <PlanningUnitMethods />}
-            {/* // todo: I think this part should be updated in terms of UI */}
-            {!editable && (
-              <div className="mt-4 space-y-3 text-xs">
-                {(puAction as PUAction) === 'include' && <p>{PUData.included.length} PU</p>}
-                {(puAction as PUAction) === 'exclude' && <p>{PUData.excluded.length} PU</p>}
-                {(puAction as PUAction) === 'available' && <p>{PUData.available.length} PU</p>}
+    <Section className="flex h-full w-full flex-col overflow-hidden">
+      <div className="space-y-1">
+        <span className="text-xs font-semibold text-blue-500">Grid Setup</span>
+        <div className="flex items-center space-x-2">
+          <h3 className="text-lg font-medium">Planning Unit Status</h3>
+          <InfoButton theme="primary" className="bg-gray-500">
+            <>
+              <h4 className="mb-2.5 font-heading text-lg">
+                Locked-in and locked-out planning units
+              </h4>
+              <div className="space-y-2">
+                <p>
+                  You can force Marxan to include or exclude some planning units from your analysis.
+                </p>
+                <p>
+                  Manually including or excluding individual planning units is useful when a
+                  real-world issue affects where new protected areas can be designated. For example,
+                  if you know that a particular planning unit contains a restricted military area
+                  and cannot be designated, then you could manually exclude that planning unit from
+                  the project.
+                </p>
+                <p>
+                  You can see the example below where a city is marked as locked-out and a protected
+                  area is marked as locked-in:
+                </p>
+                <img src={LOCK_IN_OUT_IMG} alt="Feature-Range" />
+                <p>
+                  The areas selected to be included will be <b>locked in </b>
+                  to your conservation plan and will appear in all of the solutions.
+                </p>
+                <p>
+                  The areas selected to be excluded will be <b>locked out </b>
+                  of your conservation plan and will never appear in the solutions
+                </p>
               </div>
-            )}
-          </div>
+            </>
+          </InfoButton>
+        </div>
+      </div>
+
+      <div className="mt-2.5 flex w-full items-center justify-between border-b border-gray-700">
+        <Tabs type={puAction as PUAction} onChange={onChangeTab} />
+      </div>
+
+      {editable && <PlanningUnitMethods />}
+      {/* // todo: I think this part should be updated in terms of UI */}
+      {!editable && (
+        <div className="mt-4 space-y-3 text-xs">
+          {(puAction as PUAction) === 'include' && <p>{PUData.included.length} PU</p>}
+          {(puAction as PUAction) === 'exclude' && <p>{PUData.excluded.length} PU</p>}
+          {(puAction as PUAction) === 'available' && <p>{PUData.available.length} PU</p>}
         </div>
-      </Section>
-    </motion.div>
+      )}
+    </Section>
   );
 };