[FIX] web: formRenderer: apply class on form el for device size

Before this commit, the size of the form view was handled by a media query
It made testing impossible in certain case when the size determined the behavior
of the form view (the chatter)

After this commit, a class is put on the form view to better be able to test

task-2238141
PR #53136

X-original-commit: d42610297b46f4a1624df1907a9cce91de29fafa

2 files changed, 17 insertions, 5 deletions

diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 2bcb833c14e..ffdb0d59064 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -39,9 +39,7 @@ var FormRenderer = BasicRenderer.extend(WidgetAdapterMixin, {
      * @override
      */
     start: function () {
-        if (config.device.size_class <= config.device.SIZES.XS) {
-            this.$el.addClass('o_xxs_form_view');
-        }
+        this._applyFormSizeClass();
         return this._super.apply(this, arguments);
     },
     /**
@@ -358,6 +356,19 @@ var FormRenderer = BasicRenderer.extend(WidgetAdapterMixin, {
             });
         }
     },
+    _applyFormSizeClass: function () {
+        const formEl = this.$el[0];
+        if (config.device.size_class <= config.device.SIZES.XS) {
+            formEl.classList.add('o_xxs_form_view');
+        } else {
+            formEl.classList.remove('o_xxs_form_view');
+        }
+        if (config.device.size_class === config.device.SIZES.XXL) {
+            formEl.classList.add('o_xxl_form_view');
+        } else {
+            formEl.classList.remove('o_xxl_form_view');
+        }
+    },
     /**
      * @private
      * @param {string} name
diff --git a/addons/web/static/src/js/views/kanban/quick_create_form_view.js b/addons/web/static/src/js/views/kanban/quick_create_form_view.js
index 8725c3104de..5c590c970c3 100644
--- a/addons/web/static/src/js/views/kanban/quick_create_form_view.js
+++ b/addons/web/static/src/js/views/kanban/quick_create_form_view.js
@@ -15,9 +15,10 @@ var QuickCreateFormRenderer = FormRenderer.extend({
     /**
      * @override
      */
-    start: function () {
+    start: async function () {
+        await this._super.apply(this, arguments);
         this.$el.addClass('o_xxs_form_view');
-        return this._super.apply(this, arguments);
+        this.$el.removeClass('o_xxl_form_view');
     },
 
     //--------------------------------------------------------------------------