scrollbar on outer div

This commit is contained in:
Josh Hawkins 2024-09-17 13:11:35 -05:00
parent 0a85bde342
commit 811d434b00

View File

@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { LuX, LuFilter, LuImage } from "react-icons/lu"; import { LuX, LuFilter, LuImage } from "react-icons/lu";
import { SearchFilter, SearchSource } from "@/types/search"; import { SearchFilter, SearchSource } from "@/types/search";
import { DropdownMenuSeparator } from "../ui/dropdown-menu";
type FilterType = keyof SearchFilter; type FilterType = keyof SearchFilter;
@ -476,7 +477,7 @@ export default function InputWithTags({
{((showFilters && {((showFilters &&
(Object.keys(filters).length > 0 || isSimilaritySearch)) || (Object.keys(filters).length > 0 || isSimilaritySearch)) ||
showSuggestions) && ( showSuggestions) && (
<div className="absolute left-0 top-12 z-[100] w-full rounded-md border border-input bg-background p-2 text-primary shadow-md"> <div className="scrollbar-container absolute left-0 top-12 z-[100] max-h-[200px] w-full overflow-y-auto rounded-md border border-input bg-background p-2 text-primary shadow-md">
{showFilters && {showFilters &&
(Object.keys(filters).length > 0 || isSimilaritySearch) && ( (Object.keys(filters).length > 0 || isSimilaritySearch) && (
<div ref={filterRef} className="my-2 flex flex-wrap gap-2"> <div ref={filterRef} className="my-2 flex flex-wrap gap-2">
@ -540,7 +541,7 @@ export default function InputWithTags({
{showSuggestions && ( {showSuggestions && (
<div <div
ref={suggestionRef} ref={suggestionRef}
className="scrollbar-container mt-1 max-h-[200px] overflow-y-auto" className="mt-1"
role="listbox" role="listbox"
id="suggestions-list" id="suggestions-list"
> >
@ -565,7 +566,7 @@ export default function InputWithTags({
{suggestion} {suggestion}
</button> </button>
))} ))}
<div className="my-1 border-t border-secondary-foreground" /> <DropdownMenuSeparator />
</> </>
)} )}
<h3 className="px-2 py-1 text-xs font-semibold text-secondary-foreground"> <h3 className="px-2 py-1 text-xs font-semibold text-secondary-foreground">