Fixed button not being able to handle multiple children when asChild is done

src/frontend/src/components/ui/button.tsx

@@ -66,18 +66,18 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       newChildren = toTitleCase(children);
     }
     return (
-      <Comp
+      <Comp ref={ref} {...props}>
-        className={buttonVariants({ variant, size: "none" })}
+        <div className={buttonVariants({ variant, size: "none" })}>
-        ref={ref}
-        {...props}
-      >
           <div
             className={cn(
               loading ? "opacity-100" : "opacity-0",
               "absolute self-center",
             )}
           >
-          <ForwardedIconComponent name={"Loader2"} className={"animate-spin"} />
+            <ForwardedIconComponent
+              name={"Loader2"}
+              className={"animate-spin"}
+            />
           </div>
           <div
             className={cn(
@@ -91,6 +91,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           >
             {newChildren}
           </div>
+        </div>
       </Comp>
     );
   },