From fefea440c81173fdbf1cbe5f39f34dc611d1beae Mon Sep 17 00:00:00 2001
From: Julien Castiaux <juc@odoo.com>
Date: Mon, 23 Oct 2023 16:38:22 +0000
Subject: [PATCH] [FIX] survey: chop down long words in labels

Create a new live-session survey with a multi-choice question of 4
choices. In one of the choices write a word of 20+ characters. Start the
live-session, on the manager side the choices overlap on the screen.

In case a word is longer that the available place, it can overlap on the
labels of the other columns, making the text very hard to read. This
work wraps words that are too long for a single line over multiple ones.

Task-3530706

closes odoo/odoo#146554

X-original-commit: f085957855f86fb669c533be09fd13a14a6c874d
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: Julien Castiaux (juc) <juc@odoo.com>
---
 addons/survey/static/src/js/survey_session_chart.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/addons/survey/static/src/js/survey_session_chart.js b/addons/survey/static/src/js/survey_session_chart.js
index e370bcbfcf8..83b9a2e652e 100644
--- a/addons/survey/static/src/js/survey_session_chart.js
+++ b/addons/survey/static/src/js/survey_session_chart.js
@@ -188,6 +188,10 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
                  * Which will be displayed as "this is an<br/>example of<br/>a label"
                  * Obviously, the more labels you have, the more columns, and less screen space is available.
                  *
+                 * When the screen space is too small for long words, those long words are split over multiple rows.
+                 * At 6 chars per row, the above example becomes ["this", "is an", "examp-", "le of", "a label"]
+                 * Which is displayed as "this<br/>is an<br/>examp-<br/>le of<br/>a label"
+                 * 
                  * We also adapt the font size based on the width available in the chart.
                  *
                  * So we counterbalance multiple times:
@@ -236,8 +240,13 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
                         let resultLines = [];
                         let currentLine = [];
                         for (let i = 0; i < words.length; i++) {
-                            // If the word we are adding exceed already the number of characters for the line, we add it anyway before passing to a new line
-                            currentLine.push(words[i]);
+                            // Chop down words that do not fit on a single line, add each part on its own line.
+                            let word = words[i];
+                            while (word.length > charPerLine) {
+                                resultLines.push(word.slice(0, charPerLine - 1) + '-');
+                                word = word.slice(charPerLine - 1);
+                            }
+                            currentLine.push(word);
 
                             // Continue to add words in the line if there is enough space and if there is at least one more word to add
                             const nextWord = i+1 < words.length ? words[i+1] : null;