From b2348ea1b92f97792f2ff320f03652cde2e22761 Mon Sep 17 00:00:00 2001 From: Atanas Vasilev Date: Thu, 17 Jul 2025 17:51:05 +0300 Subject: [PATCH] fix: Fix info center layout issue --- .../src/panels/RightPanel.tsx | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/control-property-editor/src/panels/RightPanel.tsx b/packages/control-property-editor/src/panels/RightPanel.tsx index 1a4cae61473..19b5c4c79e9 100644 --- a/packages/control-property-editor/src/panels/RightPanel.tsx +++ b/packages/control-property-editor/src/panels/RightPanel.tsx @@ -21,10 +21,21 @@ export function RightPanel(): ReactElement { const scenario = useSelector((state) => state.scenario); const infoCenterMessagesCount = useSelector((state) => state.infoCenterMessages.length); - const rowSize = 100; + const actionsRowHeight = 100; const header = 50; - const initialSizeQuickActions = actionsCount * rowSize + header; - const initialSizeInfoCenter = infoCenterMessagesCount * rowSize + header; + /** + * The info center can accommodate at most {@link infoCenterMaxRowsCount} rows + * with height of {@link infoCenterMaxRowHeight} each, initially. + */ + const infoCenterMaxRowsCount = 3; + // Each info center row item contains a title, description and actions(less/more, view details). + // The descriotption can contain max 4 lines with ellipsis and if the text content is more we have a `more` + // button to expand it. So the 130px seems to be the max height for each info center item when not expanded. + const infoCenterMaxRowHeight = 130; + + const initialSizeQuickActions = actionsCount * actionsRowHeight + header; + const initialSizeInfoCenter = + Math.min(infoCenterMessagesCount, infoCenterMaxRowsCount) * infoCenterMaxRowHeight + header; return (