modules/bar/Volume.qml

@@ -1,5 +1,4 @@
 import Quickshell.Io
-import QtQuick.Layouts
 import QtQuick
 import Quickshell.Services.Pipewire
 import qs.settings
@@ -7,12 +6,17 @@ import qs.reusables
 import qs
 
 Rectangle {
-    id: root
+    id: container
     radius: implicitHeight / 2
     color: pavuArea.containsMouse ? Colors.primaryContainer : Colors.surfaceContainer
     anchors.verticalCenter: parent.verticalCenter
-    implicitWidth: textRow.implicitWidth + 20
-    implicitHeight: Settings.config.barHeight - 8
+    implicitWidth: root.implicitWidth + 20
+    implicitHeight: Settings.config.barHeight - 10
+    Item {
+        id: root
+        anchors.centerIn: parent
+        implicitWidth: textRow.width
+        implicitHeight: Settings.config.barHeight
         property var sink: Pipewire.defaultAudioSink
         function getVolumeIcon() {
             // Safety check: if Pipewire is dead or sink is missing
@@ -36,13 +40,13 @@ Rectangle {
             // If it's loud, prepare the ears!
             return "volume_up";
         }
-    RowLayout {
+        Row {
             id: textRow
-        spacing: 2
-        anchors.centerIn: parent
+            anchors.centerIn: root
+            spacing: 5
             CustomText {
                 id: volumeText
-
+                anchors.verticalCenter: parent.verticalCenter
                 PwObjectTracker {
                     objects: Pipewire.ready ? Pipewire.defaultAudioSink : []
                 }
@@ -51,7 +55,7 @@ Rectangle {
             }
             CustomIcon {
                 id: volumeIcon
-            Layout.alignment: Qt.AlignVCenter
+                anchors.verticalCenter: parent.verticalCenter
                 opacity: Pipewire.ready ? root.sink.audio.muted ? 0.5 : 1 : 0
                 text: Pipewire.ready ? root.getVolumeIcon() : null
             }
@@ -69,3 +73,4 @@ Rectangle {
             hoverEnabled: true
         }
     }
+}

reusables/CustomIcon.qml

@@ -3,11 +3,9 @@ import qs.settings
 import qs
 
 Text {
-    verticalAlignment: Text.AlignVCenter
     property bool fill: true
     font.family: fill ? "Material Symbols Rounded Filled" : "Material Symbols Rounded"
     color: Colors.onSurfaceColor
-    font.pixelSize: Settings.config.fontSize + 2
     font.variableAxes: ({
             GRAD: 100,
             opsz: fill ? 48 : 20,

reusables/CustomText.qml

@@ -3,7 +3,6 @@ import qs
 import qs.settings
 
 Text {
-    verticalAlignment: Text.AlignVCenter
     color: Colors.onSurfaceColor
     font.family: Settings.config.font
     font.pixelSize: Settings.config.fontSize