From 8e1906724ccda74da4c658127ce9f3d810aaa645 Mon Sep 17 00:00:00 2001 From: Elisabeth Dickinson Date: Mon, 6 Nov 2023 11:34:55 +0100 Subject: [PATCH] [FIX] web: quick fix to remove `ButtonBox` overflow on mobile and tablet Because the number of buttons in the `ButtonBox` isn't dependent on the size of each button, sometimes the bar overflows on smaller screens. This should probably be redone to calculate the size of each button depending on its contents (which can be translatable). In the meantime, this fixes the overflow issue. task-3573807 closes odoo/odoo#141163 Related: odoo/enterprise#50256 Signed-off-by: Pierre Paridans (app) --- addons/web/static/src/views/form/button_box/button_box.js | 2 +- addons/web/static/tests/views/form/form_view_tests.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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 9bbfd7803cf..8e377be6b4c 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 @@ import { Component } from "@odoo/owl"; export class ButtonBox extends Component { setup() { const ui = useService("ui"); - this.getMaxButtons = () => [3, 3, 3, 7, 3, 4, 7][ui.size] || 7; + this.getMaxButtons = () => [2, 3, 4, 6, 3, 4, 7][ui.size] || 7; } getButtons() { 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 1abff0bbe02..8d11d848c51 100644 --- a/addons/web/static/tests/views/form/form_view_tests.js +++ b/addons/web/static/tests/views/form/form_view_tests.js @@ -413,7 +413,7 @@ QUnit.module("Views", (hooks) => { resId: 2, }); - assert.containsN(target, ".o-form-buttonbox > button", 3); + 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"); @@ -8343,10 +8343,10 @@ QUnit.module("Views", (hooks) => { ); }; - await assertFormContainsNButtonsWithSizeClass(0, 3); + await assertFormContainsNButtonsWithSizeClass(0, 2); await assertFormContainsNButtonsWithSizeClass(1, 3); - await assertFormContainsNButtonsWithSizeClass(2, 3); - await assertFormContainsNButtonsWithSizeClass(3, 7); + await assertFormContainsNButtonsWithSizeClass(2, 4); + await assertFormContainsNButtonsWithSizeClass(3, 6); await assertFormContainsNButtonsWithSizeClass(4, 3); await assertFormContainsNButtonsWithSizeClass(5, 4); await assertFormContainsNButtonsWithSizeClass(6, 7);