[FIX] web: form: fix ButttonBox More dropdown style

Before this commit, the More dropdown button of the ButtonBox
(which displays stat buttons) was broken i.e. the more button
was on another line because its size was wrongly set.

After this commit, the style is corrected, every button of the Box
is on the same line.

Part-of: odoo/odoo#78221

addons/web/static/src/views/form/button_box/button_box.js

@@ -8,7 +8,7 @@ const { Component } = owl;
 export class ButtonBox extends Component {
     setup() {
         const ui = useService("ui");
-        this.getMaxButtons = () => [2, 2, 2, 4, 7][ui.size] || 8;
+        this.getMaxButtons = () => [2, 2, 2, 4][ui.size] || 7;
     }
 
     getButtons() {

addons/web/static/src/views/form/button_box/button_box.scss

@@ -24,6 +24,20 @@
         }
     }
 
+    > .btn.oe_stat_button.o-dropdown {
+        .o_button_more {
+            height:100%;
+            width: 100%;
+            &:after {
+                @include o-caret-right
+            };
+        }
+
+        &.show .o_button_more:after {
+            @include o-caret-down;
+        }
+    }
+
     .btn.oe_stat_button {
         color: $o-main-text-color;
         height: $o-statbutton-height;

addons/web/static/src/views/form/button_box/button_box.xml

@@ -9,8 +9,8 @@
         <t t-slot="{{ button_value }}" t-foreach="visibleButtons" t-as="button" t-key="button_value" />
 
         <t t-if="additionalButtons.length" >
-            <Dropdown togglerClass="'btn o_button_more'" class="'btn oe_stat_button o_dropdown_more'">
-                <t t-set-slot="toggler">More</t>
+            <Dropdown togglerClass="'btn o_button_more'" class="'btn oe_stat_button'">
+                <t t-set-slot="toggler"><span>More</span></t>
                 <DropdownItem t-foreach="additionalButtons" t-as="button" t-key="button_value">
                     <t t-slot="{{ button_value }}" />
                 </DropdownItem>

addons/web/static/tests/views/form/form_view_tests.js

@@ -305,6 +305,71 @@ QUnit.module("Views", (hooks) => {
         assert.containsOnce(target, ".o_form_sheet_bg > .o_form_statusbar > .o_statusbar_buttons");
     });
 
+    QUnit.test("button box rendering on small screen", async (assert) => {
+        registry.category("services").add("ui", {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    value: false,
+                });
+                return {
+                    size: 0,
+                    isSmall: true,
+                };
+            },
+        });
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><div name="button_box"><button id="btn1">MyButton</button><button id="btn2">MyButton2</button><button id="btn3">MyButton3</button></div></sheet></form>`,
+            resId: 2,
+        });
+
+        assert.containsN(target, ".o-form-buttonbox > button", 2);
+        assert.containsOnce(target, ".o-dropdown.oe_stat_button .o_button_more");
+        await click(target, ".o-dropdown.oe_stat_button .o_button_more");
+
+        assert.containsOnce(target, ".o-dropdown--menu #btn3");
+    });
+
+    QUnit.test("button box rendering on big screen", async (assert) => {
+        registry.category("services").add("ui", {
+            start(env) {
+                Object.defineProperty(env, "isSmall", {
+                    value: false,
+                });
+                return {
+                    size: 9,
+                    isSmall: false,
+                };
+            },
+        });
+
+        let btnString = "";
+        for (let i = 0; i < 9; i++) {
+            btnString += `<button class="oe_stat_button" id="btn${i}">My Button ${i}</button>`;
+        }
+
+        await makeView({
+            type: "form",
+            resModel: "partner",
+            serverData,
+            arch: `<form><sheet><div name="button_box">${btnString}</div></sheet></form>`,
+            resId: 2,
+        });
+
+        assert.containsN(target, ".o-form-buttonbox > button", 7);
+        assert.containsOnce(target, ".o-form-buttonbox > .oe_stat_button.o-dropdown");
+
+        const buttonBox = target.querySelector(".o-form-buttonbox");
+        const buttonBoxRect = buttonBox.getBoundingClientRect();
+
+        for (const btn of buttonBox.children) {
+            assert.strictEqual(btn.getBoundingClientRect().top, buttonBoxRect.top);
+        }
+    });
+
     QUnit.test("duplicate fields rendered properly", async function (assert) {
         await makeView({
             type: "form",
@@ -6673,7 +6738,7 @@ QUnit.module("Views", (hooks) => {
             </button>`);
 
         // legacySelector = ".oe_stat_button:not(.dropdown-item, .dropdown-toggle)";
-        const statButtonSelector = ".o-form-buttonbox .oe_stat_button:not(.o_dropdown_more)";
+        const statButtonSelector = ".o-form-buttonbox .oe_stat_button:not(.o-dropdown)";
 
         const formView = await makeView({
             type: "form",