From b9cf71f2d66e6d50b257cdaa57851fec9357087b Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Fri, 2 Sep 2022 13:20:09 +0000
Subject: [PATCH] [FIX] web: form: do not add "o_xxl_form_view" class in
 dialogs

This class is added automatically on large screens, to better
style the form view to benefit form the available space. However,
the width of dialogs is limited, so it makes no sense to apply
this classname in this case. If we do, those form views may display
an horizontal scrollbar. For instance: in project with worksheets
enabled, create and edit a worksheet many2one.

Part-of: odoo/odoo#99503
---
 .../static/src/views/form/form_controller.js  | 16 ++++-----
 .../tests/views/form/form_view_tests.js       | 35 +++++++++++++++++++
 2 files changed, 43 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/views/form/form_controller.js b/addons/web/static/src/views/form/form_controller.js
index 43d93d16b84..bf9df625deb 100644
--- a/addons/web/static/src/views/form/form_controller.js
+++ b/addons/web/static/src/views/form/form_controller.js
@@ -397,17 +397,17 @@ export class FormController extends Component {
     }
 
     get className() {
+        const result = {};
         const { size } = this.ui;
-        let sizeClass = "";
         if (size <= SIZES.XS) {
-            sizeClass = "o_xxs_form_view";
-        } else if (size === SIZES.XXL) {
-            sizeClass = "o_xxl_form_view h-100";
+            result.o_xxs_form_view = true;
+        } else if (!this.env.inDialog && size === SIZES.XXL) {
+            result["o_xxl_form_view h-100"] = true;
         }
-        return {
-            [this.props.className]: true,
-            [sizeClass]: true,
-        };
+        if (this.props.className) {
+            result[this.props.className] = true;
+        }
+        return result;
     }
 }
 
diff --git a/addons/web/static/tests/views/form/form_view_tests.js b/addons/web/static/tests/views/form/form_view_tests.js
index 608dc522eaf..cfabd6cb06b 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/addons/web/static/tests/views/form/form_view_tests.js
@@ -2523,6 +2523,41 @@ QUnit.module("Views", (hooks) => {
         assert.containsNone(target, ".o_dialog .o_form_view .o_control_panel");
     });
 
+    QUnit.test("form views in dialogs do not have class o_xxl_form_view", async function (assert) {
+        const bus = new EventBus();
+        registry.category("services").add("ui", {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    value: false,
+                });
+                return {
+                    activateElement() {},
+                    deactivateElement() {},
+                    bus,
+                    size: SIZES.XXL,
+                    isSmall: false,
+                };
+            },
+        });
+        serverData.views = {
+            "partner,false,form": `<form><field name="foo"/></form>`,
+        };
+        serverData.actions = {
+            1: {
+                id: 1,
+                name: "Partner",
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "form"]],
+                target: "new",
+            },
+        };
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, 1);
+        assert.containsOnce(target, ".o_dialog .o_form_view");
+        assert.doesNotHaveClass(target.querySelector(".o_dialog .o_form_view"), "o_xxl_form_view");
+    });
+
     QUnit.test("buttons in form view", async function (assert) {
         assert.expect(11);