fix weird mediacontrols positioning when bar autohides

.config/quickshell/ii/modules/mediaControls/MediaControls.qml

@@ -109,12 +109,17 @@ Scope {
             id: mediaControlsRoot
             visible: true
 
+            exclusionMode: ExclusionMode.Ignore
             exclusiveZone: 0
-            implicitWidth: (
-                (mediaControlsRoot.screen.width / 2) // Middle of screen
-                    - (osdWidth / 2)                 // Dodge OSD
-                    - (widgetWidth / 2)              // Account for widget width
-            ) * 2
+            margins {
+                top: Appearance.sizes.barHeight
+                bottom: Appearance.sizes.barHeight
+                left: (mediaControlsRoot.screen.width / 2) - (osdWidth / 2) - widgetWidth
+            }
+            implicitWidth: {
+                console.log(root.widgetWidth)
+                return root.widgetWidth
+            }
             implicitHeight: playerColumnLayout.implicitHeight
             color: "transparent"
             WlrLayershell.namespace: "quickshell:mediaControls"
@@ -130,12 +135,7 @@ Scope {
 
             ColumnLayout {
                 id: playerColumnLayout
-                anchors.top: parent.top
-                anchors.bottom: parent.bottom
-                x: (mediaControlsRoot.screen.width / 2)  // Middle of screen
-                    - (osdWidth / 2)                     // Dodge OSD
-                    - (widgetWidth)                      // Account for widget width
-                    + (Appearance.sizes.elevationMargin) // It's fine for shadows to overlap
+                anchors.fill: parent
                 spacing: -Appearance.sizes.elevationMargin // Shadow overlap okay
 
                 Repeater {