Fix lopsided cursor highlight on network panel header actions (#8787)

* Fix lopsided cursor highlight on network panel header actions

The QR and speed-test header buttons used raw Button components with
asymmetric horizontal/vertical padding, producing a highlight box wider
than tall around their near-square icons. Swap them for
PanelActionButton, the canonical square inline-action component already
used elsewhere in the kit (e.g. connectPwBtn), which sizes itself
symmetrically around the icon.

Fixes #8782

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

* Center icons in PanelActionButton on whole pixels

A fractional size and anchors.centerIn put the glyph on half-pixel
coordinates, so it rounded a pixel off the center of the fill: the
speed-test icon sat low in the network header. Round the size, make it
odd so odd-width glyphs get even margins, and place the icon on whole
pixels.

Co-authored-by: Fabian Behrendt <7931874+fabianbehrendt@users.noreply.github.com>

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Co-authored-by: Fabian Behrendt <7931874+fabianbehrendt@users.noreply.github.com>

shell/Ui/PanelActionButton.qml

@@ -34,7 +34,9 @@ BorderSurface {
   property color hoverColor: foreground
   property string fontFamily: Style.font.family
   property real fontSize: Style.font.icon
-  property real size: Math.max(Style.space(22), fontSize + Style.spacing.sm * 2)
+  // Whole and odd, so an icon glyph (usually an odd number of pixels wide)
+  // has the same space on both sides instead of one pixel more on one side.
+  property real size: Math.round(Math.max(Style.space(22), fontSize + Style.spacing.sm * 2)) | 1
 
   property bool focusable: false
   property bool hasCursor: false
@@ -71,7 +73,9 @@ BorderSurface {
 
   Text {
     textFormat: Text.PlainText
-    anchors.centerIn: parent
+    // Snap to whole pixels so the glyph doesn't round away from the fill's center.
+    x: Math.round((root.width - width) / 2)
+    y: Math.round((root.height - height) / 2)
     text: root.iconText
     color: root.enabled
       ? (root._hot ? root.hoverColor : root.foreground)

shell/plugins/panels/network/Panel.qml

@@ -1246,32 +1246,28 @@ Panel {
           anchors.right: parent.right
           anchors.verticalCenter: parent.verticalCenter
 
-          Button {
+          PanelActionButton {
             id: qrAction
             visible: root.canShareWifi
             iconText: "󰐲"
             tooltipText: "Show QR code"
             foreground: root.bar.foreground
             fontFamily: root.bar.fontFamily
-            iconSize: Style.font.subtitle * 1.5
-            horizontalPadding: Style.space(5)
-            verticalPadding: Style.space(2)
+            fontSize: Style.font.subtitle * 1.5
             hasCursor: root.qrHeaderHasCursor
             Layout.alignment: Qt.AlignVCenter
             onHovered: function(on) { if (on) root.setHeaderCursor(root.qrHeaderIndex) }
             onClicked: root.summonWifiQr()
           }
 
-          Button {
+          PanelActionButton {
             id: speedAction
             visible: root.canRunSpeedTest
             iconText: "󰓅"
             tooltipText: "Run a speed test"
             foreground: root.bar.foreground
             fontFamily: root.bar.fontFamily
-            iconSize: Style.font.subtitle * 1.5
-            horizontalPadding: Style.space(5)
-            verticalPadding: Style.space(2)
+            fontSize: Style.font.subtitle * 1.5
             hasCursor: root.speedHeaderHasCursor
             Layout.alignment: Qt.AlignVCenter
             onHovered: function(on) { if (on) root.setHeaderCursor(root.speedHeaderIndex) }