From fc38d8fef82eeeae49a6b7de75ccb2ccca1d4a6e Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 8 Jun 2021 16:47:21 +0200
Subject: [PATCH] Fix form polls UI with lots of answers

---
 www/form/app-form.less | 29 +++++++++++++++++++++++++++++
 www/form/inner.js      |  7 +++++--
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/www/form/app-form.less b/www/form/app-form.less
index 8f1ad2483..f1e0c3dd0 100644
--- a/www/form/app-form.less
+++ b/www/form/app-form.less
@@ -509,6 +509,14 @@
         & > div {
             display: flex;
         }
+        .cp-form-poll-body {
+            flex-flow: column;
+            max-height: 200px;
+            overflow: auto;
+            & > div {
+                display: flex;
+            }
+        }
         .cp-poll-cell {
             width: 100px;
             height: 40px;
@@ -523,6 +531,15 @@
             }
         }
         .cp-poll-answer-name {
+            padding: 0 5px;
+            display: flex;
+            :last-child {
+                flex: 1;
+                min-width: 0;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
             .cp-avatar {
                 .avatar_main(30px);
                 margin-right: 10px;
@@ -536,8 +553,20 @@
         }
         &.cp-form-poll-switch {
             flex-flow: row;
+            .cp-avatar {
+                .avatar_main(20px);
+            }
             & > div {
                 flex-flow: column;
+                &.cp-form-poll-body {
+                    flex-flow: row;
+                    max-width: 500px;
+                    max-height: unset;
+                    scroll-snap-type: x mandatory;
+                    & > div {
+                        flex-flow: column;
+                    }
+                }
             }
             .cp-poll-cell:not(.cp-poll-switch) {
                 &:first-child {
diff --git a/www/form/inner.js b/www/form/inner.js
index f3c880afc..a0385442b 100644
--- a/www/form/inner.js
+++ b/www/form/inner.js
@@ -704,6 +704,7 @@ define([
         }
 
         // Add answers
+        var bodyEls = [];
         if (Array.isArray(answers)) {
             answers.forEach(function (answerObj) {
                 var answer = answerObj.results;
@@ -724,9 +725,11 @@ define([
                     avatar,
                     h('span', name)
                 ]));
-                lines.push(h('div', els));
+                bodyEls.push(h('div', els));
             });
         }
+        var body = h('div.cp-form-poll-body', bodyEls);
+        lines.push(body);
 
         var $s = $(switchAxis).click(function () {
             $s.closest('.cp-form-type-poll').toggleClass('cp-form-poll-switch');
@@ -1438,7 +1441,7 @@ define([
                 addLine.unshift(h('div.cp-poll-cell', nameInput));
                 lines.push(h('div', addLine));
 
-                var tag = h('div.cp-form-type-poll', lines);
+                var tag = h('div', h('div.cp-form-type-poll', lines));
                 var $tag = $(tag);
 
                 var cursorGetter;