From a0f22f5a8e40c5ea82a762ca6fbbce7189463c01 Mon Sep 17 00:00:00 2001
From: Stefano Ricci <1219739+SteRiccio@users.noreply.github.com>
Date: Thu, 14 Dec 2023 12:15:08 +0100
Subject: [PATCH] Survey hierarchy: layout adjustments (#3189)

Co-authored-by: Stefano Ricci <SteRiccio@users.noreply.github.com>
---
 .../SurveyHierarchy/SurveyHierarchy.scss      | 53 ++++++++++---------
 .../Designer/SurveyHierarchy/Tree/Tree.js     |  6 ++-
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss b/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss
index 9ae8e6c2f9..d99c2dc85e 100644
--- a/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss
+++ b/webapp/views/App/views/Designer/SurveyHierarchy/SurveyHierarchy.scss
@@ -32,35 +32,38 @@
         font-size: 0.8rem;
         letter-spacing: 0;
         padding: 0.2rem 0.5rem;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        line-height: 1.5;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
 
-      .node-grid {
-        display: flex;
-        align-items: center;
-        border: 1px solid $greyBorder;
-        justify-content: space-between;
-        transition: background-color 1s ease;
-        background-color: white;
-        height: 38px;
-        padding: 6px;
+        .node-grid {
+          display: flex;
+          align-items: center;
+          border: 1px solid $greyBorder;
+          justify-content: space-between;
+          transition: background-color 1s ease;
+          background-color: white;
+          height: auto;
+          padding: 6px;
 
-        .btn {
-          transform: rotate(-90deg);
-          padding: 0.3rem;
-        }
+          .btn {
+            transform: rotate(-90deg);
+            padding: 0.3rem;
+          }
 
-        &.node-virtual {
-          background-color: $grey;
-        }
+          &.node-virtual {
+            background-color: $grey;
+          }
+
+          &.highlight {
+            background-color: $blueLightActive;
+          }
 
-        &.highlight {
-          background-color: $blueLightActive;
+          .node-label {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            line-height: 1.5;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
         }
       }
 
diff --git a/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js b/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js
index 1068cb93df..d09bf4e049 100644
--- a/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js
+++ b/webapp/views/App/views/Designer/SurveyHierarchy/Tree/Tree.js
@@ -5,8 +5,10 @@ import { elementOffset } from '@webapp/utils/domUtils'
 
 const svgMargin = { top: 40, right: 100, bottom: 40, left: 0 }
 
+const treeNodeWidth = 80
+const treeNodeHeight = 10
 const nodeWidth = 150
-const nodeHeight = 40
+const nodeHeight = 80
 const nodeLabelDist = 19
 const nodeLinkLength = 230
 
@@ -120,7 +122,7 @@ export default class Tree {
     this.tree = d3
       .tree()
       .size([height, width])
-      .nodeSize([50, 10])
+      .nodeSize([treeNodeWidth, treeNodeHeight])
       .separation((a, b) => (a.parent === b.parent ? 1 : 2))
 
     // Assigns parent, children, height, depth