Give Elsewhen remove buttons a circular corner bubble (#14258)

shell/plugins/panels/elsewhen/CityRow.qml

@@ -83,7 +83,7 @@ Rectangle {
       }
     }
   ]
-  z: dragged ? 2 : 0
+  z: dragged ? 2 : lit ? 1 : 0
   opacity: dragged ? 0.9 : 1
   Behavior on opacity { NumberAnimation { duration: Style.duration(120) } }
 
@@ -291,18 +291,23 @@ Rectangle {
 
   // The last city stays; removing it would leave no way back.
   PanelActionButton {
-    anchors.right: parent.right
+    id: removeButton
-    anchors.top: parent.top
+    anchors.horizontalCenter: parent.right
-    anchors.margins: Style.space(1)
+    anchors.horizontalCenterOffset: -Style.space(22) * 5 / 24
+    anchors.verticalCenter: parent.top
+    size: fontSize + (Style.space(22) - fontSize) * 0.85
+    radius: size / 2
+    color: Model.mix(Color.popups.background, row.foreground, _hot ? 0.24 : 0.14)
+    borderSpec: Border.flat(Model.mix(Color.popups.background, row.foreground, _hot ? 0.65 : 0.35), Style.space(1))
     iconText: "\u00d7"
     tooltipText: "Remove"
-    foreground: row.fainter
+    foreground: row.dim
     hoverColor: row.foreground
     fontFamily: row.fontFamily
     fontSize: Style.font.bodySmall
     enabled: row.removable
     // Shown on the keyboard's pick too, so Delete's target is plain.
-    opacity: row.removable && row.lit ? 1 : 0
+    opacity: row.removable && (row.lit || removeButton._hot) ? 1 : 0
     visible: opacity > 0
     Behavior on opacity { NumberAnimation { duration: Style.duration(120) } }
     onClicked: row.panel.removeCityAt(row.index)

shell/plugins/panels/elsewhen/Panel.qml

@@ -777,6 +777,7 @@ Panel {
       Flickable {
         id: scroller
         anchors.fill: parent
+        anchors.rightMargin: -Style.space(12)
         clip: true
         interactive: false
         contentWidth: width
@@ -821,7 +822,7 @@ Panel {
 
         Column {
           id: content
-          width: scroller.width
+          width: scroller.width - Style.space(12)
           spacing: Style.spacing.panelGap
 
           HeroTitle {
@@ -857,11 +858,15 @@ Panel {
             // Clipped, so knocked rows fall out of the panel.
             Item {
               anchors.fill: parent
+              // Let circular actions straddle the rows' top-right corners.
+              anchors.topMargin: -Style.space(12)
+              anchors.rightMargin: -Style.space(12)
               clip: true
 
               Column {
                 id: listWrap
-                width: parent.width
+                y: Style.space(12)
+                width: stage.width
                 spacing: Style.spacing.panelGap
 
                 Column {