[FIX] web: kanban progress bar, auto width

Have ~50 records in a column,
Mark 49 of them as blocked (kanban_state field)
Mark 1 or 2 as done

Before this commit, the bar that showed the proportions of blocked objects was invisible
This was because the min-width of a bar was 10px, without max-width
Leaving the red bar to 95% or something, the green bar to 10px
All of this overflowing 100%

After this commit, we compute max-width and min-width to be able to fit everything
within the progress bar

OPW 1867464
closes #25962

2 files changed, 8 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
index 7e4f2cd96a8..569505954d0 100644
--- a/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
+++ b/addons/web/static/src/js/views/kanban/kanban_column_progressbar.js
@@ -132,6 +132,7 @@ var KanbanColumnProgressBar = Widget.extend({
         });
 
         // Display and animate the progress bars
+        var barNumber = 0;
         _.each(self.colors, function (val, key) {
             var $bar = self.$bars[val];
             var count = self.subgroupCounts && self.subgroupCounts[key] || 0;
@@ -156,7 +157,14 @@ var KanbanColumnProgressBar = Widget.extend({
             window.getComputedStyle($bar[0]).getPropertyValue('width'); // Force reflow so that animations work
             if (count > 0) {
                 $bar.addClass('o_bar_has_records');
+                // Make sure every bar that has records has some space
+                // and that everything adds up to 100%
+                var minWidth = 6*barNumber;
+                var maxWidth = 100 - minWidth;
+                self.$('.progress-bar.o_bar_has_records').css('max-width', maxWidth + '%');
+                self.$('.progress-bar.o_bar_has_records').css('min-width', minWidth + '%');
                 $bar.css('width', (count * 100 / self.groupCount) + '%');
+                barNumber++;
             } else {
                 $bar.css('width', '');
             }
diff --git a/addons/web/static/src/less/kanban_column_progressbar.less b/addons/web/static/src/less/kanban_column_progressbar.less
index f4cffd6c097..233ae5c0d01 100644
--- a/addons/web/static/src/less/kanban_column_progressbar.less
+++ b/addons/web/static/src/less/kanban_column_progressbar.less
@@ -73,11 +73,6 @@
             margin-bottom: 0;
             box-shadow: none;
             cursor: pointer;
-
-            // Be sure that a bar with data has a minimun width
-            &.o_bar_has_records {
-                min-width: 10px;
-            }
         }
 
         .o_kanban_counter_label {