From 51d38e3efd67b16e8070690471461ca967e264bc Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 11 Jun 2024 10:01:15 -0500
Subject: [PATCH] put zones inside of scrollable container

---
 .../components/filter/ReviewFilterGroup.tsx   | 91 ++++++++++---------
 1 file changed, 48 insertions(+), 43 deletions(-)

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
index eb4e4055e..a76b81db6 100644
--- a/web/src/components/filter/ReviewFilterGroup.tsx
+++ b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -726,54 +726,59 @@ export function GeneralFilterContent({
             />
           ))}
         </div>
-      </div>
-      {allZones && setCurrentZones && (
-        <>
-          <DropdownMenuSeparator />
-          <div className="mb-5 mt-2.5 flex items-center justify-between">
-            <Label
-              className="mx-2 cursor-pointer text-primary"
-              htmlFor="allZones"
-            >
-              All Zones
-            </Label>
-            <Switch
-              className="ml-1"
-              id="allZones"
-              checked={currentZones == undefined}
-              onCheckedChange={(isChecked) => {
-                if (isChecked) {
-                  setCurrentZones(undefined);
-                }
-              }}
-            />
-          </div>
-          <div className="my-2.5 flex flex-col gap-2.5">
-            {allZones.map((item) => (
-              <FilterSwitch
-                label={item.replaceAll("_", " ")}
-                isChecked={currentZones?.includes(item) ?? false}
+
+        {allZones && setCurrentZones && (
+          <>
+            <DropdownMenuSeparator />
+            <div className="mb-5 mt-2.5 flex items-center justify-between">
+              <Label
+                className="mx-2 cursor-pointer text-primary"
+                htmlFor="allZones"
+              >
+                All Zones
+              </Label>
+              <Switch
+                className="ml-1"
+                id="allZones"
+                checked={currentZones == undefined}
                 onCheckedChange={(isChecked) => {
                   if (isChecked) {
-                    const updatedZones = currentZones ? [...currentZones] : [];
-
-                    updatedZones.push(item);
-                    setCurrentZones(updatedZones);
-                  } else {
-                    const updatedZones = currentZones ? [...currentZones] : [];
-
-                    // can not deselect the last item
-                    if (updatedZones.length > 1) {
-                      updatedZones.splice(updatedZones.indexOf(item), 1);
-                      setCurrentZones(updatedZones);
-                    }
+                    setCurrentZones(undefined);
                   }
                 }}
               />
-            ))}
-          </div>
-        </>
-      )}
+            </div>
+            <div className="my-2.5 flex flex-col gap-2.5">
+              {allZones.map((item) => (
+                <FilterSwitch
+                  label={item.replaceAll("_", " ")}
+                  isChecked={currentZones?.includes(item) ?? false}
+                  onCheckedChange={(isChecked) => {
+                    if (isChecked) {
+                      const updatedZones = currentZones
+                        ? [...currentZones]
+                        : [];
+
+                      updatedZones.push(item);
+                      setCurrentZones(updatedZones);
+                    } else {
+                      const updatedZones = currentZones
+                        ? [...currentZones]
+                        : [];
+
+                      // can not deselect the last item
+                      if (updatedZones.length > 1) {
+                        updatedZones.splice(updatedZones.indexOf(item), 1);
+                        setCurrentZones(updatedZones);
+                      }
+                    }
+                  }}
+                />
+              ))}
+            </div>
+          </>
+        )}
+      </div>
       <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button