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}
)}