🚧 users selector

src/components/multi-select/multi-select-content.tsx

@@ -23,7 +23,7 @@ export type MultiSelectTagsProps<T extends TagValue> = {
     ref?: Ref<HTMLButtonElement>;
 };
 
-export function MultiSelectTags<T extends TagValue>({
+export function MultiSelectContent<T extends TagValue>({
     emptyPlaceholder,
     searchPlaceholder,
     searchQuery,
@@ -40,7 +40,8 @@ export function MultiSelectTags<T extends TagValue>({
                 value={searchQuery}
                 onValueChange={onSearch}
             />
-            <CommandList>
+            {/* FIXME: why isn't this list scrolling ????? */}
+            <CommandList className="scroll-py-0 max-h-20">
                 <CommandEmpty>{emptyPlaceholder}</CommandEmpty>
                 <CommandGroup>
                     {options.map((option) => (

src/components/multi-select/multi-select-tag-input.tsx

@@ -9,8 +9,8 @@ import { ChevronDownIcon, XIcon } from "lucide-react";
 import {
     type TagValue,
     type MultiSelectTagsProps,
-    MultiSelectTags
-} from "./multi-select-tags";
+    MultiSelectContent
+} from "./multi-select-content";
 import { useState } from "react";
 
 export interface MultiSelectInputProps<
@@ -19,7 +19,7 @@ export interface MultiSelectInputProps<
     buttonText?: string;
 }
 
-export function MultiSelectInput<T extends TagValue>({
+export function MultiSelectTagInput<T extends TagValue>({
     buttonText,
     ...props
 }: MultiSelectInputProps<T>) {
@@ -83,7 +83,7 @@ export function MultiSelectInput<T extends TagValue>({
                 </div>
             </PopoverTrigger>
             <PopoverContent className="p-0">
-                <MultiSelectTags {...props} />
+                <MultiSelectContent {...props} />
             </PopoverContent>
         </Popover>
     );