optional asChild for colour picker trigger

packages/frontend/src/components/organisations-dialog.tsx

@@ -658,7 +658,7 @@ function OrganisationsDialog({
                                         </div>
                                         {isAdmin &&
                                             (isCreatingStatus ? (
-                                                <div className="flex flex-col gap-2">
+                                                <>
                                                     <div className="flex gap-2">
                                                         <Input
                                                             value={newStatusName}
@@ -684,6 +684,8 @@ function OrganisationsDialog({
                                                         <ColourPicker
                                                             colour={newStatusColour}
                                                             onChange={setNewStatusColour}
+                                                            asChild={false}
+                                                            className="w-9 h-9"
                                                         />
                                                         <Button
                                                             variant="outline"
@@ -702,7 +704,7 @@ function OrganisationsDialog({
                                                             {statusError}
                                                         </p>
                                                     )}
-                                                </div>
+                                                </>
                                             ) : (
                                                 <Button
                                                     variant="outline"

packages/frontend/src/components/ui/colour-picker.tsx

@@ -2,18 +2,27 @@ import { HexColorPicker } from "react-colorful";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 
 export default function ColourPicker({
     colour,
     onChange,
+    asChild = true,
+    className,
 }: {
     colour: string;
     onChange: (value: string) => void;
+    asChild?: boolean;
+    className?: string;
 }) {
     return (
         <Popover>
-            <PopoverTrigger asChild>
-                <Button type="button" className="w-8 h-8" style={{ backgroundColor: colour }} />
+            <PopoverTrigger asChild={asChild}>
+                <Button
+                    type="button"
+                    className={cn("w-8 h-8", className)}
+                    style={{ backgroundColor: colour }}
+                />
             </PopoverTrigger>
             <PopoverContent className="w-fit grid gap-2 p-2" align="start" side={"top"}>
                 <HexColorPicker color={colour} onChange={onChange} className="p-0 m-0" />

todo.md

@@ -1,6 +1,5 @@
 # HIGH PRIORITY
 
-- fix colour picker alignment in new status form
 - projects
   - project management menu (will this be accessed from the organisations-dialog? or will it be a separate menu in the user select)
 - sprints