fix(StatusSlider): improve handle draging area

Issues
- The slider only handle mouse events in its own control space.
- In oder to use the entire area it needs to be centered.

Fixes

- Center the content vertically (handle and slider bar)
- Height and implicitHeight defaults to heigh of the handle
- Add note to create awareness about the mouse handling requirements

ui/StatusQ/src/StatusQ/Components/StatusImageCropPanel.qml

@@ -257,7 +257,6 @@ Item {
             }
             StatusSlider {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 5
                 Layout.topMargin: 20
                 Layout.bottomMargin: 25
                 Layout.alignment: Qt.AlignVCenter

ui/StatusQ/src/StatusQ/Controls/StatusSlider.qml

@@ -6,19 +6,28 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+/*!
+  /note beware, the slider processes the mouse events only in its control space. So it must be at least as high
+  as the /c handle so user can grab it fully.
+ */
 Slider {
     id: statusSlider
 
     implicitWidth: 360
-    implicitHeight: 4
+    implicitHeight: Math.max(handle.implicitHeight, background.implicitHeight)
 
     leftPadding: 0
 
     background: Rectangle {
         id: bgRect
+
+        x: statusSlider.leftPadding
+        y: statusSlider.topPadding + statusSlider.availableHeight / 2 - height / 2
         implicitWidth: 100
         implicitHeight: 4
+        width: statusSlider.availableWidth
         height: implicitHeight
+
         color: {
             if (statusSlider.value === statusSlider.to) {
                 return Theme.palette.primaryColor1