InfoBox width Prop (#1373)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Simple PR to add a `width` prop to the infobox container. 

Occasionally I find that I want the infobox to fill the available space, rather than fit to content. Currently this is not possible. The work around is to wrap in a div/blockstack with `width-full`. This change allows for such scenarios in future.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/InfoBox.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils";
 
 interface InfoBoxProps {
   title: string;
+  width?: "full" | "fit" | "auto";
   className?: string;
   children: ReactNode;
   variant?: "info" | "error" | "warning" | "success" | "ghost";
@@ -35,15 +36,24 @@ const variantStyles: Record<
   },
 };
 
+const widthStyles: Record<NonNullable<InfoBoxProps["width"]>, string> = {
+  full: "w-full",
+  auto: "w-auto",
+  fit: "w-fit",
+};
+
 export const InfoBox = ({
   title,
+  width = "fit",
   className,
   children,
   variant = "info",
 }: InfoBoxProps) => {
   const styles = variantStyles[variant];
+  const widthClass = widthStyles[width];
+
   return (
-    <div className={cn("border rounded-md p-2", styles.container)}>
+    <div className={cn("border rounded-md p-2", styles.container, widthClass)}>
       <div className={cn("text-sm font-semibold mb-1", styles.title)}>
         {title}
       </div>