♻️ replace roles & user selectors in machines & create user

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

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

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

@@ -1,17 +1,16 @@
+import { buttonVariants } from "@app/components/ui/button";
 import {
     Popover,
     PopoverContent,
     PopoverTrigger
 } from "@app/components/ui/popover";
-import { Button, buttonVariants } from "@app/components/ui/button";
 import { cn } from "@app/lib/cn";
 import { ChevronDownIcon, XIcon } from "lucide-react";
 import {
-    type TagValue,
     type MultiSelectTagsProps,
+    type TagValue,
     MultiSelectContent
 } from "./multi-select-content";
-import { useState } from "react";
 
 export interface MultiSelectInputProps<
     T extends TagValue
@@ -36,7 +35,8 @@ export function MultiSelectTagInput<T extends TagValue>({
                         }),
                         "justify-between w-full inline-flex",
                         "text-muted-foreground pl-1.5 cursor-text",
-                        "hover:bg-transparent hover:text-muted-foreground"
+                        "hover:bg-transparent hover:text-muted-foreground",
+                        props.disabled && "pointer-events-none opacity-50"
                     )}
                 >
                     <span
@@ -57,6 +57,7 @@ export function MultiSelectTagInput<T extends TagValue>({
                                 {option.text}
                                 <button
                                     className="p-0.5 flex-none cursor-pointer"
+                                    type="button"
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         let newValues = [];