Yeah it should have already been looking as desired pre-patch, I noticed the same. You're right, I'll try to find the right fix.

I think the problem is the icon within the toolbutton is relatively small making it look like a bigger left margin

Maybe we could make it a pushbutton rather than a toolbutton.

In D20972#459893, @davidedmundson wrote:

I think the problem is the icon within the toolbutton is relatively small making it look like a bigger left margin

That definitely plays a big role here perception-wise, but IMO we should just focus on the icon frame.

After zooming in and counting the pixels I think it's partly due to the separator stealing the width.

At 1.5 scaling that's 8 pixels between the icon frame and search field frame.

5 pixels between the search frame and separator + 2 pixels separator width, which leaves a pixel unaccounted for however.

Code does show separator is right anchored to parent.right.

When anchors.margins is removed we see that the ToolButton still has 1px of its own margin around it, which might be that +1 that adds up to 8. The separator has on the other hand now even eaten into the search field's border.

I think the best solution would be if the separator was left anchored to parent.right. That's not working out however, but we could still compensate with a right margin.

Two sane solutions I see, but which don't end up working:

• the vertical separator becomes invisible if left anchored to parent.right instead of right anchored
• the searchLayout RowLayout has too big of a right margin if right anchored to separator.left

While the proposed Layout.rightMargin is not an ideal solution, in these circumstances I think it's a legitimate way to compensate for the separator eating into the width.

In D20972#460812, @filipf wrote:

While the proposed Layout.rightMargin is not an ideal solution, in these circumstances I think it's a legitimate way to compensate for the separator eating into the width.

Yeah, that's what I had to do for Discover in D21234.

+1

When anchors.margins is removed we see that the ToolButton still has 1px of its own margin around it

From what? Should they be there?

In D20972#465912, @davidedmundson wrote:

When anchors.margins is removed we see that the ToolButton still has 1px of its own margin around it

From what? Should they be there?

I believe it's inherent to the control. If I test with:

import QtQuick 2.12
import QtQuick.Controls 2.12 as QQC2

Rectangle {
    id: recty
    width: 150
    height: 100
    color: "black"

    Rectangle {
        id: tangly
        anchors.centerIn: recty
        width: 100
        height: 50
        color: "white"
    }

    QQC2.ToolButton {
        anchors.left: tangly.left
        anchors.top: tangly.top
        icon.name: "application-menu"
    }
}

I see that there are 1px margins to the left and to the top of the tool button.

So Discover seems to have greater issues, but the added margin looks better than no added margin in system settings.

@davidedmundson I can't find a better solution..

@ngraham I forgot about RTL, my bad.

I ended up using the margins approach because adding an Item also added row layout's inherent spacing which ended up in too big of a margin.

And when compared with Discover, it turns out the margin needs to be only 1px, not 2px.

Cool. But trying this out... are you sure 1 is enough? To my eyes, 2 looks better:

2px looks better to me as well, let's add 1px more to the margin in Discover then?

Well it's all about making sure the top, bottom, and right paddings are identical. If Discover's search field also needs adjustment, that's fine.

D23274 makes this unnecessary.