Gauge strange margin and labels problems

[Kyeiv]

I noticed strange Gauge behavior when scaling it.

when it is big enough its look is acceptable:

but when smaller it gets margin from the left side:

also as you can see the labels are not centered vertically to tickmarks.

How can it be fixed?

My code:

Gauge {
    Rectangle{
        anchors.fill: parent
        color: "transparent"
        border.color: "red"
    }

    value: 10

    implicitHeight: barHeight
    implicitWidth: barWidth //both width and height depend on the screen size example: width: screen.width / 6

    style: GaugeStyle {
        valueBar: Rectangle {
            implicitWidth: control.implicitWidth * (1/3)
            color: "green"
        }

        minorTickmark: Item {
            implicitWidth: control.implicitWidth * (1/3) * (1/4)
            implicitHeight: 1

            Rectangle {
                color: "#cccccc"
                anchors.fill: parent
                anchors.leftMargin: 2
                anchors.rightMargin: 4
            }
        }

        tickmark: Item {
            implicitWidth: control.implicitWidth * (1/3) * (1/2)
            implicitHeight: 1

            Rectangle {
                color: "#c8c8c8"
                anchors.fill: parent
                anchors.leftMargin: 3
                anchors.rightMargin: 3
            }
        }

        tickmarkLabel:  Text {
            font.pixelSize: control.implicitWidth * 0.1
            text: styleData.value
            color: "#e5e5e5"
            antialiasing: true
        }
    }
}