diff --git a/packages/cli/src/ui/components/shared/MaxSizedBox.tsx b/packages/cli/src/ui/components/shared/MaxSizedBox.tsx index faa1052a..ced33a37 100644 --- a/packages/cli/src/ui/components/shared/MaxSizedBox.tsx +++ b/packages/cli/src/ui/components/shared/MaxSizedBox.tsx @@ -107,39 +107,31 @@ export const MaxSizedBox: React.FC = ({ const { addOverflowingId, removeOverflowingId } = useOverflowActions() || {}; const laidOutStyledText: StyledText[][] = []; - // When maxHeight is not set, we render the content normally rather - // than using our custom layout logic. This should slightly improve - // performance for the case where there is no height limit and is - // a useful debugging tool to ensure that our layouts are consist - // with the expected layout when there is no height limit. - // In the future we might choose to still apply our layout logic - // even in this case particularlly if there are cases where we - // intentionally diverse how certain layouts are rendered. - let targetMaxHeight; - if (maxHeight !== undefined) { - targetMaxHeight = Math.max(Math.round(maxHeight), MINIMUM_MAX_HEIGHT); + const targetMaxHeight = Math.max( + Math.round(maxHeight ?? Number.MAX_SAFE_INTEGER), + MINIMUM_MAX_HEIGHT, + ); - if (maxWidth === undefined) { - throw new Error('maxWidth must be defined when maxHeight is set.'); - } - function visitRows(element: React.ReactNode) { - if (!React.isValidElement(element)) { - return; - } - if (element.type === Fragment) { - React.Children.forEach(element.props.children, visitRows); - return; - } - if (element.type === Box) { - layoutInkElementAsStyledText(element, maxWidth!, laidOutStyledText); - return; - } - - debugReportError('MaxSizedBox children must be elements', element); - } - - React.Children.forEach(children, visitRows); + if (maxWidth === undefined) { + throw new Error('maxWidth must be defined when maxHeight is set.'); } + function visitRows(element: React.ReactNode) { + if (!React.isValidElement(element)) { + return; + } + if (element.type === Fragment) { + React.Children.forEach(element.props.children, visitRows); + return; + } + if (element.type === Box) { + layoutInkElementAsStyledText(element, maxWidth!, laidOutStyledText); + return; + } + + debugReportError('MaxSizedBox children must be elements', element); + } + + React.Children.forEach(children, visitRows); const contentWillOverflow = (targetMaxHeight !== undefined && @@ -168,14 +160,6 @@ export const MaxSizedBox: React.FC = ({ }; }, [id, totalHiddenLines, addOverflowingId, removeOverflowingId]); - if (maxHeight === undefined) { - return ( - - {children} - - ); - } - const visibleStyledText = hiddenLinesCount > 0 ? overflowDirection === 'top'