Skip to content

Fix wide button content alignment

ButtonContent.qml sets Layout.fillWidth: true for both the icon and text component. This is benign when the button is at its minimum width, but if you force the button to be wider than normal (for example, to get it to perfectly fit in some space, or to align the heights of a column of buttons) then this causes the icon to no longer hug the left edge as expected; instead it appears at a random-looking horizontal position according to the width of the label relative to the total width of the button.

We need to conditionalize this so that it only happens for buttons with the text below the icon, or buttons with no text.

Before After
Before After

(Ignore the inconsistent sorting of devices between the two screenshots; that's an unrelated bug)

cc @teams/vdg @ndavis

Edited by Nate Graham

Merge request reports