@@ -261,8 +261,9 @@ Item {
261261 visible: width > 0
262262 anchors {
263263 top: parent.top
264− right: cancelLabel.left
264+ right: cancelButton.left
265265 bottom: parent.bottom
266+ rightMargin: units.gu(-1)
266267 }
267268
268269 Icon {
@@ -277,25 +278,28 @@ Item {
277278 }
278279 }
279280
280− Label {
281− id: cancelLabel
282− text: i18n.tr("Cancel")
283− color: header.panelForegroundColor
284− verticalAlignment: Text.AlignVCenter
281+ AbstractButton {
282+ id: cancelButton
283+ width: cancelLabel.width + cancelLabel.anchors.rightMargin + cancelLabel.anchors.leftMargin
285284 anchors {
286285 top: parent.top
287286 right: parent.right
288287 bottom: parent.bottom
289− margins: units.gu(2)
290288 }
291− AbstractButton {
292− anchors.fill: parent
293− // So that clicking in the empty area on the left of Cancel
294− // has the same effect as clicking on the empty area on the right
295− anchors.leftMargin: units.gu(-2)
296− onClicked: {
297− root.clearSearch(false);
298− headerContainer.showSearch = false;
289+ onClicked: {
290+ root.clearSearch(false);
291+ headerContainer.showSearch = false;
292+ }
293+ Label {
294+ id: cancelLabel
295+ text: i18n.tr("Cancel")
296+ color: header.panelForegroundColor
297+ verticalAlignment: Text.AlignVCenter
298+ anchors {
299+ verticalCenter: parent.verticalCenter
300+ right: parent.right
301+ rightMargin: units.gu(2)
302+ leftMargin: units.gu(1)
299303 }
300304 }
301305 }