From 502a6752598a219beb04a3c650ccf231cae8a663 Mon Sep 17 00:00:00 2001
From: Manuel Wegria <abstracts33d@gmail.com>
Date: Fri, 24 May 2024 16:12:55 +0200
Subject: [PATCH] remove margin-bottom and truncate title length to 35 chars
 max + add title

---
 app/assets/stylesheets/webpack/line/line.scss      |  3 +--
 app/javascript/components/Line/components/Line.jsx | 13 +++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/webpack/line/line.scss b/app/assets/stylesheets/webpack/line/line.scss
index 4df65fa5e..4185d0419 100644
--- a/app/assets/stylesheets/webpack/line/line.scss
+++ b/app/assets/stylesheets/webpack/line/line.scss
@@ -28,8 +28,7 @@
   display: flex;
   position: relative;
   z-index: 1;
-  min-height: 2rem;
-  margin-bottom: 1em;
+  min-height: 2.5rem;
 
   .move_up-4 {
     margin-top: -12rem;
diff --git a/app/javascript/components/Line/components/Line.jsx b/app/javascript/components/Line/components/Line.jsx
index 99dbfd1c9..1268b1bba 100644
--- a/app/javascript/components/Line/components/Line.jsx
+++ b/app/javascript/components/Line/components/Line.jsx
@@ -97,6 +97,11 @@ const ItemGroup = forwardRef((props, ref) => {
       emptyCount.current = 0
     }
 
+    let maxTitleLenght = 35
+    let groupTitle = computeGroupTitle(level, title, type, format)
+
+    console.log(groupTitle)
+    console.log(groupTitle.length > maxTitleLenght)
     if (typeof items === 'object' && !Array.isArray(items)) {
       emptyCount.current = emptyCount.current + 1
       return (
@@ -104,7 +109,9 @@ const ItemGroup = forwardRef((props, ref) => {
           {!(type === 'num' && level === 1) && !withoutGroup && (
             <div className={`line__group__title level-${level}`} style={{cursor: "pointer", zIndex: 1000}}
                  data-action="click->toggle-display-line#reveal">
-              <div dangerouslySetInnerHTML={{__html: computeGroupTitle(level, title, type, format)}}/>
+              <div
+                data-toggle={groupTitle.length > maxTitleLenght ? "tooltip" : ""} data-placement="top" title={groupTitle.length > maxTitleLenght ? groupTitle : ""}
+                dangerouslySetInnerHTML={{__html: groupTitle.length > maxTitleLenght ? groupTitle.substring(0, maxTitleLenght) + "..." : groupTitle}}/>
               <span className="px-2" data-toggle-display-line-target="upArrow"
                     dangerouslySetInnerHTML={{__html: icons.up}}/>
               <span className="px-2 d-none" data-toggle-display-line-target="downArrow"
@@ -146,7 +153,9 @@ const ItemGroup = forwardRef((props, ref) => {
           {!(type === 'num' && level === 1) && !withoutGroup && (
             <div className={`line__group__title level-${level}`} style={{zIndex: 10, cursor: "pointer"}}
                  data-action="click->toggle-display-line#reveal">
-              <div dangerouslySetInnerHTML={{__html: computeGroupTitle(level, title, type, format)}}/>
+              <div
+                data-toggle={groupTitle.length > maxTitleLenght ? "tooltip" : ""} data-placement="top" title={groupTitle.length > maxTitleLenght ? groupTitle : ""}
+                dangerouslySetInnerHTML={{__html: groupTitle.length > maxTitleLenght ? groupTitle.substring(0, maxTitleLenght) + "..." : groupTitle}}/>
               <span className="px-2" data-toggle-display-line-target="upArrow"
                     dangerouslySetInnerHTML={{__html: icons.up}}/>
               <span className="px-2 d-none" data-toggle-display-line-target="downArrow"