diff --git a/addons/web/static/src/views/form/button_box/button_box.js b/addons/web/static/src/views/form/button_box/button_box.js
index 6916261556a..ea6d2e56caa 100644
--- a/addons/web/static/src/views/form/button_box/button_box.js
+++ b/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() {
diff --git a/addons/web/static/src/views/form/button_box/button_box.scss b/addons/web/static/src/views/form/button_box/button_box.scss
index b180d850148..2ca2a106dcd 100644
--- a/addons/web/static/src/views/form/button_box/button_box.scss
+++ b/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;
diff --git a/addons/web/static/src/views/form/button_box/button_box.xml b/addons/web/static/src/views/form/button_box/button_box.xml
index 5750bf2c9cf..ed38273850c 100644
--- a/addons/web/static/src/views/form/button_box/button_box.xml
+++ b/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>
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 0e066ba5577..93dab4476ae 100644
--- a/addons/web/static/tests/views/form/form_view_tests.js
+++ b/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",