Fix form style issues with long text

customize.dist/src/less2/include/app-noscroll.less

@@ -11,10 +11,12 @@
         }
         ::-webkit-scrollbar {
             width: 6px;
+            height: 6px;
         }
         ::-webkit-scrollbar-thumb {
             background-color: @cp_scrollbar-fg;
             width: 6px;
+            height: 6px;
         }
         height: 100%;
         width: 100%;

www/form/app-form.less

@@ -276,6 +276,7 @@
                 }
             }
             div.cp-form-creator-content {
+                position: relative;
                 .cp-form-block-type {
                     margin-top: -35px;
                     &.editable {
@@ -924,8 +925,12 @@
         display: flex;
         flex-flow: column;
         align-items: baseline;
-        .cp-radio {
+        .cp-radio, .cp-checkmark {
             display: inline-flex;
+            max-width: 100%;
+        }
+        .cp-checkmark-label {
+            overflow: auto;
         }
     }
     .cp-form-type-multiradio {
@@ -938,6 +943,8 @@
                 vertical-align: middle;
                 &:first-child {
                     min-width: 200px;
+                    max-width: 350px;
+                    overflow: auto;
                 }
                 .cp-radio-mark {
                     margin: auto;
@@ -951,8 +958,11 @@
     .cp-form-type-sort {
         cursor: grab;
         padding: 5px;
+        display: flex;
+        align-items: center;
+        overflow: auto;
         .cp-form-handle {
-            margin-right: 5px;
+            min-width: 12px;
         }
         .cp-form-sort-order {
             border: 1px solid @cryptpad_text_col;
@@ -971,12 +981,14 @@
     .cp-form-type-poll-container {
         overflow: auto;
         .cp-form-poll-hint {
-            margin-bottom: 10px;
+            position: absolute;
         }
     }
     .cp-form-type-poll {
+        margin-top: 32px; // cp-form-poll-hint is "absolute"
         display: inline-flex;
         flex-flow: column;
+        width: 100%;
         & > div {
             display: flex;
         }
@@ -986,7 +998,6 @@
         .cp-form-poll-body {
             flex-flow: column;
             max-height: 225px;
-            overflow: auto;
 
             & > div {
                 display: flex;
@@ -1000,9 +1011,7 @@
             justify-content: center;
             margin-top:5px;
             margin-left:5px;
-            &:first-child {
+            flex-shrink: 0;
-                width: 200px;
-            }
             button {
                 width: 100%;
                 border-top: 0px;
@@ -1048,6 +1057,9 @@
         .cp-poll-time-day {
             flex-basis: 100px;
             border-bottom: 1px solid @cryptpad_text_col;
+            &:first-child {
+                border-color: @cp_form-bg1 !important;
+            }
         }
         &:not(.cp-form-poll-switch) {
             & > div {
@@ -1055,14 +1067,38 @@
                     margin-bottom: 5px;
                 }
             }
-            .cp-form-poll-body {
+
-                &::-webkit-scrollbar {
+            .cp-poll-cell {
-                  display: none;
+                &:first-child {
+                    min-width: 200px;
+                    background: #424242;
+                    position: absolute;
+                    margin-left: 0;
+                    background: @cp_form-bg1;
+                }
+                &:nth-child(2) {
+                    margin-left: 205px;
                 }
-                -ms-overflow-style: none;  /* IE and Edge */
-                scrollbar-width: none;  /* Firefox */
             }
+
+            .cp-form-poll-option, .cp-poll-time-day, .cp-form-poll-choice {
+                flex-grow: 1;
+                flex-shrink: 0;
+            }
+
             .cp-form-poll-option, .cp-poll-time-day {
+                span {
+                    text-overflow: ellipsis;
+                    max-width: 100%;
+                    overflow: hidden;
+                    line-height: 1.2;
+                    hyphens: auto;
+
+                    display: -webkit-box;
+                    -webkit-line-clamp: 2;
+                    -webkit-box-orient: vertical;
+                }
+
                 flex-flow: column;
                 text-align: center;
                 .cp-form-weekday-separator {
@@ -1083,9 +1119,6 @@
                 flex-flow: column;
                 &.cp-form-poll-body {
                     flex-flow: row;
-                    max-width: 550px;
-                    max-height: unset;
-                    scroll-snap-type: x mandatory;
                     & > div {
                         flex-flow: column;
                     }
@@ -1100,12 +1133,23 @@
                 }
             }
             .cp-form-poll-option, .cp-poll-switch {
+                span {
+                    text-overflow: ellipsis;
+                    max-width: 100%;
+                    overflow: hidden;
+                    max-height: 100%;
+                    line-height: 1.2;
+                    text-align: center;
+                }
                 width: 200px;
                 .cp-form-weekday-separator {
                     margin-right: 5px;
                     margin-left: 5px;
                 }
             }
+            div.cp-poll-time-day-container {
+                width: auto !important;
+            }
             .cp-poll-time-day {
                 flex-basis: 40px;
                 border-right: none;

www/form/inner.js

@@ -725,7 +725,7 @@ define([
 
         // Add an initial row to "time" values containing the days
         if (opts.type === "time") {
-            var days = [h('div.cp-poll-cell')];
+            var days = [h('div.cp-poll-cell.cp-poll-time-day')];
             var _days = {};
             extractValues(opts.values).forEach(function (d) {
                 var date = new Date(d);
@@ -745,7 +745,8 @@ define([
                     h('span', day)
                 ]));
             });
-            lines.unshift(h('div', days));
+            var w = 200 + 105*(opts.values.length || 1);
+            lines.unshift(h('div.cp-poll-time-day-container', {style: 'width:'+w+'px;'}, days));
         }
 
         // Add answers