fix overflow bug in filter panel

Author: brendan-kellam

packages/web/src/app/[domain]/search/components/filterPanel/entry.tsx

@@ -32,7 +32,7 @@ export const Entry = ({
     return (
         <div
             className={clsx(
-                "flex flex-row items-center justify-between py-0.5 px-2 cursor-pointer rounded-md gap-2 select-none",
+                "flex flex-row items-center justify-between py-0.5 px-1 cursor-pointer rounded-md gap-2 select-none",
                 {
                     "hover:bg-gray-200 dark:hover:bg-gray-700": !isSelected,
                     "bg-blue-200 dark:bg-blue-400": isSelected,

packages/web/src/app/[domain]/search/components/filterPanel/filter.tsx

@@ -44,27 +44,27 @@ export const Filter = ({
             className
         )}>
             <h2 className="text-sm font-semibold">{title}</h2>
-            <Input
-                placeholder={searchPlaceholder}
-                className="h-8"
-                onChange={(event) => setSearchFilter(event.target.value)}
-            />
+            <div className="pr-1">
+                <Input
+                    placeholder={searchPlaceholder}
+                    className="h-8"
+                    onChange={(event) => setSearchFilter(event.target.value)}
+                />
+            </div>
 
-            <ScrollArea>
-                <div
-                    className="flex flex-col gap-0.5 text-sm px-0.5"
-                >
-                    {filteredEntries
-                        .sort((entryA, entryB) => compareEntries(entryB, entryA))
-                        .map((entry) => (
-                            <Entry
-                                key={entry.key}
-                                entry={entry}
-                                onClicked={() => onEntryClicked(entry.key)}
-                            />
-                        ))}
-                </div>
-            </ScrollArea>
+            <div
+                className="flex flex-col gap-0.5 text-sm overflow-scroll no-scrollbar"
+            >
+                {filteredEntries
+                    .sort((entryA, entryB) => compareEntries(entryB, entryA))
+                    .map((entry) => (
+                        <Entry
+                            key={entry.key}
+                            entry={entry}
+                            onClicked={() => onEntryClicked(entry.key)}
+                        />
+                    ))}
+            </div>
         </div>
     )
 }

packages/web/src/app/globals.css

@@ -128,4 +128,14 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+.no-scrollbar::-webkit-scrollbar {
+  width: 0px;
+  background: transparent;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE dan Edge */
+  scrollbar-width: none; /* Firefox */
 }