From d1a89387f9564c089517fd1d697a359707cbe16b Mon Sep 17 00:00:00 2001
From: Corey Woodworth <coreywoodworth@gmail.com>
Date: Fri, 26 Sep 2025 13:24:19 -0400
Subject: [PATCH] Fix: Make sure left side doesn't get squished

---
 Widgets/NSlider.qml | 85 ++++++++++++++++++++++++++-------------------
 1 file changed, 50 insertions(+), 35 deletions(-)

diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml
index 323c9f43..a2721beb 100644
--- a/Widgets/NSlider.qml
+++ b/Widgets/NSlider.qml
@@ -30,52 +30,67 @@ Slider {
     border.color: Qt.alpha(Color.mOutline, 0.5)
     border.width: Math.max(1, Style.borderS * scaling)
 
-    // Animated gradient active track
-    Rectangle {
-      id: activeTrack
+    // A container composite shape that puts a semicircle on the end
+    Item {
+      id: activeTrackContainer
       width: root.visualPosition * parent.width
       height: parent.height
-      radius: parent.radius
+      clip: true
 
-      // Animated gradient fill
-      gradient: Gradient {
-        orientation: Gradient.Horizontal
-        GradientStop {
-          position: 0.0
-          color: Qt.darker(Color.mPrimary, 1.2)
-          Behavior on color {
-            ColorAnimation {
-              duration: 300
+      // The rounded end cap made from a rounded rectangle
+      Rectangle {
+        width: parent.height
+        height: parent.height
+        radius: width / 2
+        color: Qt.darker(Color.mPrimary, 1.2) //starting color of gradient
+      }
+
+      // The main rectangle
+      Rectangle {
+        x: parent.height / 2
+        width: parent.width - x // Fills the rest of the container
+        height: parent.height
+        radius: 0
+        // Animated gradient fill
+        gradient: Gradient {
+          orientation: Gradient.Horizontal
+          GradientStop {
+            position: 0.0
+            color: Qt.darker(Color.mPrimary, 1.2)
+            Behavior on color {
+              ColorAnimation {
+                duration: 300
+              }
             }
           }
-        }
-        GradientStop {
-          position: 0.5
-          color: Color.mPrimary
-          SequentialAnimation on position {
-            loops: Animation.Infinite
-            NumberAnimation {
-              from: 0.3
-              to: 0.7
-              duration: 2000
-              easing.type: Easing.InOutSine
-            }
-            NumberAnimation {
-              from: 0.7
-              to: 0.3
-              duration: 2000
-              easing.type: Easing.InOutSine
+          GradientStop {
+            position: 0.5
+            color: Color.mPrimary
+            SequentialAnimation on position {
+              loops: Animation.Infinite
+              NumberAnimation {
+                from: 0.3
+                to: 0.7
+                duration: 2000
+                easing.type: Easing.InOutSine
+              }
+              NumberAnimation {
+                from: 0.7
+                to: 0.3
+                duration: 2000
+                easing.type: Easing.InOutSine
+              }
             }
           }
-        }
-        GradientStop {
-          position: 1.0
-          color: Qt.lighter(Color.mPrimary, 1.2)
+          GradientStop {
+            position: 1.0
+            color: Qt.lighter(Color.mPrimary, 1.2)
+          }
         }
       }
     }
 
-    // Circular cutout
+  // Circular cutout
     Rectangle {
       id: knobCutout
       width: knobDiameter + cutoutExtra