RemorseTimer: Add square boundary for the content so the gauge stays a circle

On non-square screens the countdown gauge got stretched into an oval.
This wraps the arc and labels in a centered Math.min(width, height) square so it stays circular also when the component is not fullscreen.
Re #44.

Author: moWerk

src/controls/qml/RemorseTimer.qml

@@ -147,55 +147,65 @@ Rectangle {
         onTriggered: remorseTimer.countdownSeconds--
     }
 
-    SegmentedArc {
-        id: countdownArc
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            verticalCenter: parent.verticalCenter
+    // Content is sized against a centered square (the shorter screen edge)
+    // instead of Dims, so it stays correct on non-square screens and when the
+    // parent is not full-screen.
+    Item {
+        id: gaugeArea
+        anchors.centerIn: parent
+        height: Math.min(parent.width, parent.height + flatTireHeight)
+        width: height
+
+        SegmentedArc {
+            id: countdownArc
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                verticalCenter: parent.verticalCenter
+            }
+            width: parent.width * 0.22
+            height: width
+            segmentAmount: remorseTimer.gaugeSegmentAmount
+            inputValue: remorseTimer.arcValue
+            fgColor: "#ffffff"
+            bgColor: Qt.rgba(1, 1, 1, 0.2)
+            start: remorseTimer.gaugeStartDegree
+            endFromStart: remorseTimer.gaugeEndFromStartDegree
         }
-        width: Dims.l(22)
-        height: width
-        segmentAmount: remorseTimer.gaugeSegmentAmount
-        inputValue: remorseTimer.arcValue
-        fgColor: "#ffffff"
-        bgColor: Qt.rgba(1, 1, 1, 0.2)
-        start: remorseTimer.gaugeStartDegree
-        endFromStart: remorseTimer.gaugeEndFromStartDegree
-    }
 
-    Label {
-        id: countdownLabel
-        anchors.centerIn: countdownArc
-        font {
-            pixelSize: Dims.l(18)
-            styleName: "SemiBoldCondensed"
+        Label {
+            id: countdownLabel
+            anchors.centerIn: countdownArc
+            font {
+                pixelSize: parent.width * 0.18
+                styleName: "SemiBoldCondensed"
+            }
+            color: "#ffffff"
+            text: remorseTimer.countdownSeconds
+            z: countdownArc.z + 1
         }
-        color: "#ffffff"
-        text: remorseTimer.countdownSeconds
-        z: countdownArc.z + 1
-    }
 
-    Label {
-        id: actionLabel
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            bottom: countdownArc.top
-            bottomMargin: Dims.l(1)
+        Label {
+            id: actionLabel
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: countdownArc.top
+                bottomMargin: parent.width * 0.01
+            }
+            font.pixelSize: parent.width * 0.06
+            color: "#ffffff"
+            text: action
         }
-        font.pixelSize: Dims.l(6)
-        color: "#ffffff"
-        text: action
-    }
 
-    Label {
-        id: cancelLabel
-        anchors {
-            horizontalCenter: parent.horizontalCenter
-            top: countdownArc.bottom
-            topMargin: Dims.l(1)
+        Label {
+            id: cancelLabel
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                top: countdownArc.bottom
+                topMargin: parent.width * 0.01
+            }
+            font.pixelSize: parent.width * 0.06
+            color: "#ffffff"
         }
-        font.pixelSize: Dims.l(6)
-        color: "#ffffff"
     }
 
     MouseArea {