feat: improve bed workspace layout

components/ui/dialog.tsx

@@ -7,6 +7,14 @@ import { Dialog as KumoDialog } from "@cloudflare/kumo/components/dialog";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
+const dialogWidthValues = {
+  sm: "28rem",
+  md: "36rem",
+  lg: "42rem",
+  xl: "48rem",
+  wide: "64rem",
+} as const;
+
 type DialogProps = {
   open: boolean;
   title: string;
@@ -15,11 +23,16 @@ type DialogProps = {
   footer?: React.ReactNode;
   onClose: () => void;
   className?: string;
+  width?: keyof typeof dialogWidthValues;
 };
 
 const kumoBackdropClassNames =
   "fixed inset-0 bg-kumo-recessed opacity-80 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0";
 
+type DialogStyle = React.CSSProperties & {
+  "--dialog-width": string;
+};
+
 export function Dialog({
   open,
   title,
@@ -28,7 +41,14 @@ export function Dialog({
   footer,
   onClose,
   className,
+  width = "md",
 }: DialogProps): React.ReactElement {
+  const dialogStyle: DialogStyle = {
+    "--dialog-width": dialogWidthValues[width],
+    transform: "none",
+    translate: "0 0",
+  };
+
   return (
     <KumoDialog.Root
       onOpenChange={(nextOpen) => {
@@ -40,13 +60,13 @@ export function Dialog({
     >
       <KumoDialog
         className={cn(
-          "teatea-dialog fixed inset-0 z-50 m-auto flex h-fit max-h-[min(calc(100svh-1.5rem),52rem)] w-[min(calc(100vw-1.5rem),42rem)] min-w-0 flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl outline-none ring-1 ring-kumo-line",
+          "teatea-dialog fixed inset-0 z-50 m-auto flex h-fit max-h-[min(calc(100svh-1.5rem),52rem)] w-[min(calc(100vw-1.5rem),var(--dialog-width))] min-w-0 flex-col overflow-hidden rounded-lg border border-kumo-line bg-kumo-base p-0 shadow-xl outline-none ring-1 ring-kumo-line",
           "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0",
           className,
         )}
         data-kumo-backdrop-classes={kumoBackdropClassNames}
         size="xl"
-        style={{ transform: "none", translate: "0 0" }}
+        style={dialogStyle}
       >
         <header className="flex shrink-0 items-start justify-between gap-4 border-b border-kumo-line bg-kumo-base p-5">
           <div className="min-w-0">