From 7ccfce25b34903ab94cea76ce84f7ac6f4a65e1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caol=C3=A1n=20McNamara?= Date: Sat, 21 Mar 2026 21:18:46 +0000 Subject: [PATCH 1/2] jsdialog: fix menubutton alignment with other controls in grids MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The broad button selector in btns.css matched jsdialog menubuttons, overriding their margin and width. This caused menubuttons to be offset by 5px from comboboxes and listboxes in the same grid column, since those are div elements that do not match the btns.css selector. Exclude .menubutton from the btns.css catch-all so menubuttons only get their jsdialogs.css styling. Also fix the menubutton rule to use the standard control height (32px), font size, and padding to match other controls, start-align the content, and push the dropdown arrow to the end of the button. Add a regression test that asserts the menubutton and listbox-container share the same left edge in the Border tab of the Character dialog. Signed-off-by: Caolán McNamara Change-Id: I3ca1a8c46f905f849d08d087f79ad940d8e2ee57 --- browser/css/btns.css | 2 +- browser/css/jsdialogs.css | 11 ++++++++--- .../desktop/writer/spinfield_spec.js | 19 +++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/browser/css/btns.css b/browser/css/btns.css index c81054227154b..8d4e9b3621d83 100644 --- a/browser/css/btns.css +++ b/browser/css/btns.css @@ -156,7 +156,7 @@ button.jsdialog[disabled] img { :not(.main-nav) .button-secondary, :not(.main-nav) .button-secondary:not(.arrowbackground), -:not(.main-nav) > div:not(.toolbox) > button:not(.ui-tab):not(.ui-expander-btn):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button):not(.ui-linkbutton):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.ui-treeview-header-button) { +:not(.main-nav) > div:not(.toolbox) > button:not(.ui-tab):not(.ui-expander-btn):not(.ui-corner-all):not(.button-primary):not(.unobutton):not(.form-field-button):not(.col):not(.arrowbackground):not(.ui-combobox-button):not(.ui-linkbutton):not(.spinfieldbutton-up):not(.spinfieldbutton-down):not(.menubutton):not(.ui-treeview-header-button) { box-sizing: border-box; height: 32px; line-height: normal; diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index cbe5a40ee923a..76334ec7f0e7e 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -1969,17 +1969,18 @@ img.context-menu-icon { /* menu button */ .jsdialog.menubutton { box-sizing: border-box; + height: 32px; line-height: normal; - font-size: calc(var(--default-font-size)*1.2); + font-size: var(--default-font-size); font-family: var(--cool-font); border: 1px solid var(--color-border-dark); border-radius: var(--border-radius); - padding: 8px 10px; + padding: 0 10px; margin: 2px 0px; background-color: var(--color-background-dark); display: flex; align-items: center; - justify-content: center; + justify-content: flex-start; } .jsdialog.menubutton img { @@ -2011,6 +2012,10 @@ button.has-img img { margin: 5px 0 0 5px; } +.jsdialog.menubutton .arrow { + margin-inline-start: auto; +} + .jsdialog.menubutton[disabled] { background-color: transparent !important; color: var(--color-text-lighter) !important; diff --git a/cypress_test/integration_tests/desktop/writer/spinfield_spec.js b/cypress_test/integration_tests/desktop/writer/spinfield_spec.js index ea1e5376cd839..305b86ee5dac2 100644 --- a/cypress_test/integration_tests/desktop/writer/spinfield_spec.js +++ b/cypress_test/integration_tests/desktop/writer/spinfield_spec.js @@ -288,4 +288,23 @@ describe(['tagdesktop'], 'Spinfield unit and button tests', function () { }); }); }); + + it('Menubutton and listbox-container left-align in grid', function () { + openDialogAndSwitchToBorder(); + + // The Line section of the Border tab has a menubutton (#linestylelb) + // and a listbox-container (#linewidthlb) in the same grid column. + // They should share the same left edge. + cy.cGet('#linestylelb').should('be.visible'); + cy.cGet('#linewidthlb').should('be.visible'); + + cy.cGet('#linestylelb').then(function ($btn) { + var btnLeft = $btn[0].getBoundingClientRect().left; + + cy.cGet('#linewidthlb').should(function ($list) { + var listLeft = $list[0].getBoundingClientRect().left; + expect(listLeft).to.equal(btnLeft); + }); + }); + }); }); From fec879f7185c4d06ecc9236be53a1b41bf563ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Caol=C3=A1n=20McNamara?= Date: Sat, 28 Mar 2026 20:32:15 +0000 Subject: [PATCH 2/2] fix unwanted line breaking of menubutton text MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit since the menubutton was removed from the catch-all rule that was disrupting their margin and width Signed-off-by: Caolán McNamara Change-Id: I89df97cf397af9922610faf06bd130b1011a013e --- browser/css/jsdialogs.css | 1 + 1 file changed, 1 insertion(+) diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css index 76334ec7f0e7e..41229a821edb3 100644 --- a/browser/css/jsdialogs.css +++ b/browser/css/jsdialogs.css @@ -1971,6 +1971,7 @@ img.context-menu-icon { box-sizing: border-box; height: 32px; line-height: normal; + width: max-content; font-size: var(--default-font-size); font-family: var(--cool-font); border: 1px solid var(--color-border-dark);