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 ? (
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 ? (
{children}
) : (
-
+
{children}
)}