Smooth flick animation: scale the symbol instead of its font size

font.pixelSize is an integer, so the old animation stepped in whole
pixels and re-laid out the text each step: width and height jumped,
centering snapped x sideways and y even moved backwards. Draw at the
final size and animate scale and position, which are continuous.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

qml/Key.qml

@@ -57,14 +57,19 @@ Item {
     // Flicking slides the secondary symbol down into the main position.
     Text {
         id: flick
-        readonly property real restY: key.height * 0.1
-        readonly property real centerY: (key.height - height) / 2
+        // Drawn at its final size and scaled down at rest. Animating
+        // font.pixelSize instead steps in whole pixels and re-lays out the
+        // text each step, so the symbol jitters.
+        readonly property real restScale: 0.6
+        readonly property real restCenterY: key.height * 0.1 + height * restScale / 2
+        readonly property real centerY: restCenterY + (key.height / 2 - restCenterY) * key.flickProgress
 
         visible: text !== "" && !key.blank
         text: key.flickLabel
         anchors.horizontalCenter: parent.horizontalCenter
-        y: restY + (centerY - restY) * key.flickProgress
-        font.pixelSize: key.height * (0.24 + 0.16 * key.flickProgress)
+        y: centerY - height / 2
+        scale: restScale + (1 - restScale) * key.flickProgress
+        font.pixelSize: key.height * 0.4
         color: key.flickProgress >= 1 ? Theme.text : Theme.secondaryText
     }