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.
This commit is contained in:
Anso
2026-06-05 16:03:45 -04:00
committed by GitHub
parent b4cca9b995
commit 5d508b9416
2 changed files with 11 additions and 1 deletions
@@ -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">
+10 -1
View File
@@ -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>
)}