NU-1999 Restrict description window to not take 100% height (#7496)

* NU-1999 Restrict description window to not take 100% height

* NU-1999 add scrollbar style

* Updated snapshots (#7501)

Co-authored-by: Dzuming <[email protected]>

* NU-1999 calculate maxHeight

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Dzuming <[email protected]>

designer/client/src/components/graph/node-modal/node/StyledHeader.tsx

@@ -19,6 +19,29 @@ export const StyledContent = styled(Window.Content)(({ theme }) => {
         "body :has(>&)": {
             scrollPadding: theme.spacing(3.5),
             scrollPaddingTop: theme.spacing(6),
+            "::-webkit-scrollbar-track": {
+                width: "8px",
+                height: "8px",
+                background: blendLighten(theme.palette.background.paper, 0.1),
+            },
+            "::-webkit-scrollbar-thumb": {
+                background: blendLighten(theme.palette.background.paper, 0.5),
+                backgroundClip: "content-box",
+                border: "2px solid transparent",
+                borderRadius: "100px",
+                height: "15px",
+            },
+            "::-webkit-scrollbar-thumb:hover": {
+                background: blendLighten(theme.palette.background.paper, 0.5),
+            },
+            "::-webkit-scrollbar-corner": {
+                background: theme.palette.background.paper,
+            },
+            "::-webkit-scrollbar": {
+                paddingTop: theme.spacing(2),
+                width: "8px",
+                height: "8px",
+            },
         },
     };
 });

designer/client/src/containers/ScenarioDescription.tsx

@@ -10,6 +10,30 @@ import { Scenario } from "../components/Process/types";
 import NodeUtils from "../components/graph/NodeUtils";
 import { NodeOrPropertiesType } from "../types";
 
+const measureText = (text: string, font: string, elementWidth: number): { width: number; height: number } => {
+    const canvas = document.createElement("canvas");
+    const context = canvas.getContext("2d");
+    if (!context) return { width: 0, height: 0 };
+
+    context.font = font;
+    const lines = text.split("\n");
+    let totalHeight = 0;
+    let maxWidth = 0;
+
+    lines.forEach((line) => {
+        const metrics = context.measureText(line);
+        const width = metrics.width;
+        const lineHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+
+        // Calculate the number of lines based on the element width
+        const lineCount = Math.ceil(width / elementWidth);
+        totalHeight += lineHeight * lineCount;
+        maxWidth = Math.max(maxWidth, width);
+    });
+
+    return { width: Math.min(maxWidth, elementWidth), height: totalHeight };
+};
+
 export const DescriptionViewMode = {
     descriptionView: "description",
     descriptionEdit: "descriptionEdit",
@@ -25,14 +49,26 @@ export function useOpenDescription() {
             scenario: Scenario,
             descriptionViewMode?: DescriptionViewMode,
             layoutData?: WindowType["layoutData"],
-        ) =>
-            open({
+        ) => {
+            const textMetric = measureText(scenario.scenarioGraph.properties.additionalFields.description, "14px monospace", 600);
+
+            const descriptionHeightInPercentage = (textMetric.height / window.innerHeight) * 100;
+            const maxHeightInPercentage = 35;
+            const maxPercentageHeightAsNumber = window.innerHeight * (maxHeightInPercentage / 100);
+            const isRestrictedMaxHeight = descriptionHeightInPercentage > maxHeightInPercentage;
+
+            return open({
                 kind: descriptionViewMode === DescriptionViewMode.descriptionEdit ? WindowKind.editDescription : WindowKind.viewDescription,
                 isResizable: true,
                 shouldCloseOnEsc: false,
                 meta: { node, scenario },
-                layoutData,
-            }),
+                height: isRestrictedMaxHeight ? maxPercentageHeightAsNumber : undefined,
+                layoutData: {
+                    ...layoutData,
+                },
+            });
+        },
+
         [open],
     );
 }