fix overflow bug in filter panel

This commit is contained in:
bkellam 2025-04-04 00:28:02 -07:00
parent 21bbe09fc9
commit 8b1b908c73
3 changed files with 31 additions and 21 deletions

View file

@ -32,7 +32,7 @@ export const Entry = ({
return ( return (
<div <div
className={clsx( 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, "hover:bg-gray-200 dark:hover:bg-gray-700": !isSelected,
"bg-blue-200 dark:bg-blue-400": isSelected, "bg-blue-200 dark:bg-blue-400": isSelected,

View file

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

View file

@ -129,3 +129,13 @@
@apply bg-background text-foreground; @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 */
}