[FIX] web: empty kanban view on mobile

Due to the recent refactoring in control panel 40dd1219,
some css rules have been broken in mobile.

To fix this, we need to set 'o_current' class inside the
displayed column because we need to know which one to
display in mobile.

This issue doesn't occur in desktop because all kanban columns
are displayed.

closes odoo/odoo#29457

addons/web/static/src/js/views/kanban/kanban_renderer_mobile.js

@@ -143,7 +143,7 @@ KanbanRenderer.include({
             onSuccess: function () {
                 // update the columns and tabs positions (optionally with an animation)
                 var updateFunc = animate ? 'animate' : 'css';
-                self.$('.o_kanban_mobile_tab').removeClass('o_current');
+                self.$('.o_kanban_mobile_tab, .o_kanban_group').removeClass('o_current');
                 _.each(self.widgets, function (column, index) {
                     var columnID = column.id || column.db_id;
                     var $column = self.$('.o_kanban_group[data-id="' + columnID + '"]');
@@ -157,6 +157,7 @@ KanbanRenderer.include({
                     } else if (index === moveToIndex) {
                         $column[updateFunc]({left: '0%'});
                         $tab[updateFunc]({left: '50%'});
+                        $column.addClass('o_current');
                         $tab.addClass('o_current');
                     } else if (index < moveToIndex) {
                         $column.css({left: '-100%'});

addons/web/static/src/scss/kanban_view_mobile.scss

@@ -36,6 +36,9 @@
             margin-left: 0; // override the margin-left: -1px of the desktop mode
             border: none;
 
+            &.o_current {
+                position: initial;
+            }
             .o_kanban_header {
                 display: none;
             }

addons/web/static/tests/views/kanban_mobile_tests.js

@@ -56,7 +56,7 @@ QUnit.module('Views', {
     QUnit.module('KanbanView Mobile');
 
     QUnit.test('mobile grouped rendering', function (assert) {
-        assert.expect(9);
+        assert.expect(11);
 
         var kanban = createView({
             View: KanbanView,
@@ -75,6 +75,8 @@ QUnit.module('Views', {
         assert.containsN(kanban, '.o_kanban_group', 2, "should have 2 columns" );
         assert.hasClass(kanban.$('.o_kanban_mobile_tab:first'),'o_current',
             "first tab is the active tab with class 'o_current'");
+        assert.hasClass(kanban.$('.o_kanban_group:first'),'o_current',
+            "first column is the active column with class 'o_current'");
         assert.containsN(kanban, '.o_kanban_group:first > div.o_kanban_record', 2,
             "there are 2 records in active tab");
         assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 0,
@@ -89,6 +91,8 @@ QUnit.module('Views', {
         kanban.$('.o_kanban_mobile_tab:nth(1)').trigger('click');
         assert.hasClass(kanban.$('.o_kanban_mobile_tab:nth(1)'),'o_current',
             "second tab is now active with class 'o_current'");
+        assert.hasClass(kanban.$('.o_kanban_group:nth(1)'),'o_current',
+            "second column is now active with class 'o_current'");
         assert.strictEqual(kanban.$('.o_kanban_group:nth(1) > div.o_kanban_record').length, 2,
             "the 2 records of the second group have now been loaded");