fix overflow bug in filter panel

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,15 +44,16 @@ export const Filter = ({
             className
         )}>
             <h2 className="text-sm font-semibold">{title}</h2>
+            <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"
+                className="flex flex-col gap-0.5 text-sm overflow-scroll no-scrollbar"
             >
                 {filteredEntries
                     .sort((entryA, entryB) => compareEntries(entryB, entryA))
@@ -64,7 +65,6 @@ export const Filter = ({
                         />
                     ))}
             </div>
-            </ScrollArea>
         </div>
     )
 }

packages/web/src/app/globals.css

@@ -129,3 +129,13 @@
     @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 */
+}