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 (
<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,

View file

@ -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>
)
}

View file

@ -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 */
}