@@ -90,7 +90,7 @@ Item {
9090
9191 Row {
9292 id: row
93− spacing: units.gu(2)
93+ spacing: 0
9494 height: parent.height
9595
9696 ActionContext {
@@ -125,7 +125,11 @@ Item {
125125 readonly property bool shouldDisplay: x + width + ((__ownIndex < rowRepeater.count-1) ? units.gu(2) : 0) <
126126 root.overflowWidth - ((__ownIndex < rowRepeater.count-1) ? overflowButton.width : 0)
127127
128− implicitWidth: column.implicitWidth
128+ // First item is not centered, it has 0 gu on the left and 1 on the right
129+ // so needs different width and anchors
130+ readonly property bool isFirstItem: __ownIndex == 0
131+
132+ implicitWidth: column.implicitWidth + (isFirstItem ? units.gu(1) : units.gu(2))
129133 implicitHeight: row.height
130134 enabled: (model.sensitive === true) && shouldDisplay
131135 opacity: shouldDisplay ? 1 : 0
@@ -186,7 +190,9 @@ Item {
186190 id: column
187191 spacing: units.gu(1)
188192 anchors {
189− centerIn: parent
193+ verticalCenter: parent.verticalCenter
194+ horizontalCenter: !visualItem.isFirstItem ? parent.horizontalCenter : undefined
195+ left: visualItem.isFirstItem ? parent.left : undefined
190196 }
191197
192198 Icon {
@@ -381,8 +387,8 @@ Item {
381387 anchors {
382388 bottom: row.bottom
383389 }
384− x: d.currentItem ? row.x + d.currentItem.x - units.gu(1) : 0
385− width: d.currentItem ? d.currentItem.width + units.gu(2) : 0
390+ x: d.currentItem ? row.x + d.currentItem.x : 0
391+ width: d.currentItem ? d.currentItem.width : 0
386392 height: units.dp(4)
387393 color: UbuntuColors.orange
388394 visible: d.currentItem