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..41229a821edb3 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1969,17 +1969,19 @@ 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);
+	width: max-content;
+	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 +2013,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);
+			});
+		});
+	});
 });