mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-31 20:58:04 +00:00
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:
@@ -250,6 +250,7 @@ export function BlueprintDetail({ blueprintId, open, onOpenChange, onChanged, ca
|
|||||||
} : undefined}
|
} : undefined}
|
||||||
footerContext={footerContext}
|
footerContext={footerContext}
|
||||||
size="lg"
|
size="lg"
|
||||||
|
constrainBodyWidth
|
||||||
>
|
>
|
||||||
{!blueprint || !summary ? (
|
{!blueprint || !summary ? (
|
||||||
<div className="space-y-3">
|
<div className="space-y-3">
|
||||||
|
|||||||
@@ -60,6 +60,14 @@ export interface SystemSheetProps {
|
|||||||
* body padding (`noScroll` skips the default `px-6 py-5` wrapper).
|
* body padding (`noScroll` skips the default `px-6 py-5` wrapper).
|
||||||
*/
|
*/
|
||||||
noScroll?: boolean;
|
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;
|
children?: React.ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -78,6 +86,7 @@ export function SystemSheet({
|
|||||||
footerContext,
|
footerContext,
|
||||||
size = 'md',
|
size = 'md',
|
||||||
noScroll = false,
|
noScroll = false,
|
||||||
|
constrainBodyWidth = false,
|
||||||
children,
|
children,
|
||||||
}: SystemSheetProps) {
|
}: SystemSheetProps) {
|
||||||
const hasToolbar = !!(primaryAction || (secondaryActions && secondaryActions.length > 0) || destructiveAction);
|
const hasToolbar = !!(primaryAction || (secondaryActions && secondaryActions.length > 0) || destructiveAction);
|
||||||
@@ -122,7 +131,7 @@ export function SystemSheet({
|
|||||||
{noScroll ? (
|
{noScroll ? (
|
||||||
<div className="flex-1 min-h-0 flex flex-col">{children}</div>
|
<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>
|
<div className="px-6 py-5">{children}</div>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user