From 207c338587da46142be07eb6196d1a03bfa4448c Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 9 May 2024 08:16:46 -0500
Subject: [PATCH] keep box the same size when filtering icons

---
 web/src/components/icons/IconPicker.tsx | 42 +++++++++++++------------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/web/src/components/icons/IconPicker.tsx b/web/src/components/icons/IconPicker.tsx
index 6529621c9..21883ccdc 100644
--- a/web/src/components/icons/IconPicker.tsx
+++ b/web/src/components/icons/IconPicker.tsx
@@ -114,26 +114,28 @@ export default function IconPicker({
             value={searchTerm}
             onChange={(e) => setSearchTerm(e.target.value)}
           />
-          <div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1">
-            {icons.map(([name, Icon]) => (
-              <div
-                key={name}
-                className={cn(
-                  "flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg",
-                  selectedIcon?.name === name
-                    ? "bg-selected text-white"
-                    : "hover:bg-secondary-foreground",
-                )}
-              >
-                <Icon
-                  size={20}
-                  onClick={() => {
-                    handleIconSelect({ name, Icon });
-                    setOpen(false);
-                  }}
-                />
-              </div>
-            ))}
+          <div className="flex flex-col flex-1 h-[20dvh]">
+            <div className="grid grid-cols-6 my-2 gap-2 max-h-[20dvh] overflow-y-auto pr-1">
+              {icons.map(([name, Icon]) => (
+                <div
+                  key={name}
+                  className={cn(
+                    "flex flex-row justify-center items-start hover:cursor-pointer p-1 rounded-lg",
+                    selectedIcon?.name === name
+                      ? "bg-selected text-white"
+                      : "hover:bg-secondary-foreground",
+                  )}
+                >
+                  <Icon
+                    size={20}
+                    onClick={() => {
+                      handleIconSelect({ name, Icon });
+                      setOpen(false);
+                    }}
+                  />
+                </div>
+              ))}
+            </div>
           </div>
         </PopoverContent>
       </Popover>