From 5d508b941683cdc4b3a9065e02653ccde0a53726 Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Fri, 5 Jun 2026 16:03:45 -0400
Subject: [PATCH] fix(blueprints): keep the edit sheet body within the sheet
 width (#1314)

The blueprint detail sheet embeds a code editor in its Edit form. The
sheet body scrolls inside a Radix ScrollArea whose default wrapper sizes
to its content, so the editor's intrinsic width pushed the body past the
sheet edge and the right side (the editor and the Save/Cancel buttons)
was clipped.

Add an opt-in constrainBodyWidth prop to SystemSheet that bounds the
scrolling body to the sheet width and lets a wider child scroll
horizontally, and enable it on the blueprint sheet. The prop defaults
off, so every other sheet is unchanged.
---
 .../src/components/blueprints/BlueprintDetail.tsx     |  1 +
 frontend/src/components/ui/system-sheet.tsx           | 11 ++++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/blueprints/BlueprintDetail.tsx b/frontend/src/components/blueprints/BlueprintDetail.tsx
index 4b41c167..04c68398 100644
--- a/frontend/src/components/blueprints/BlueprintDetail.tsx
+++ b/frontend/src/components/blueprints/BlueprintDetail.tsx
@@ -250,6 +250,7 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
                 } : undefined}
                 footerContext={footerContext}
                 size="lg"
+                constrainBodyWidth
             >
                 {!blueprint || !summary ? (
                     <div className="space-y-3">
diff --git a/frontend/src/components/ui/system-sheet.tsx b/frontend/src/components/ui/system-sheet.tsx
index 86920f59..cc4b58f4 100644
--- a/frontend/src/components/ui/system-sheet.tsx
+++ b/frontend/src/components/ui/system-sheet.tsx
@@ -60,6 +60,14 @@ export interface SystemSheetProps {
    * body padding (`noScroll` skips the default `px-6 py-5` wrapper).
    */
   noScroll?: boolean;
+  /**
+   * Constrain the scrolling body to the sheet width and let any wider child scroll
+   * horizontally instead of overflowing the sheet. Use when the body contains a
+   * fixed-layout widget that forces its own min-width (e.g. the Monaco editor),
+   * which otherwise pushes the body past the sheet edge and gets clipped. Ignored
+   * when `noScroll` is set.
+   */
+  constrainBodyWidth?: boolean;
   children?: React.ReactNode;
 }
 
@@ -78,6 +86,7 @@ export function SystemSheet({
   footerContext,
   size = 'md',
   noScroll = false,
+  constrainBodyWidth = false,
   children,
 }: SystemSheetProps) {
   const hasToolbar = !!(primaryAction || (secondaryActions && secondaryActions.length > 0) || destructiveAction);
@@ -122,7 +131,7 @@ export function SystemSheet({
         {noScroll ? (
           <div className="flex-1 min-h-0 flex flex-col">{children}</div>
         ) : (
-          <ScrollArea className="flex-1">
+          <ScrollArea className="flex-1" block={constrainBodyWidth}>
             <div className="px-6 py-5">{children}</div>
           </ScrollArea>
         )}