volume is cracked

Modules/AudioPopup.qml

@@ -76,22 +76,73 @@ Item {
 		StackLayout {
 			id: stack
 			Layout.fillWidth: true
+			Layout.preferredHeight: currentIndex === 0 ? vol.childrenRect.height : dev.childrenRect.height
 			currentIndex: 0
 
-			VolumesTab {}
+			VolumesTab { id: vol }
-			DevicesTab {}
+			DevicesTab { id: dev }
+
+			Behavior on currentIndex {
+				SequentialAnimation {
+					ParallelAnimation {
+						Anim {
+							target: stack
+							property: "opacity"
+							to: 0
+							duration: MaterialEasing.expressiveEffectsTime
+						}
+
+						Anim {
+							target: stack
+							property: "scale"
+							to: 0.9
+							duration: MaterialEasing.expressiveEffectsTime
+						}
+					}
+
+					PropertyAction {}
+
+					ParallelAnimation {
+						Anim {
+							target: stack
+							property: "opacity"
+							to: 1
+							duration: MaterialEasing.expressiveEffectsTime
+						}
+
+						Anim {
+							target: stack
+							property: "scale"
+							to: 1
+							duration: MaterialEasing.expressiveEffectsTime
+						}
+					}
+				}
+			}
 		}
     }
 
 	component VolumesTab: ColumnLayout {
 		spacing: 12
 
+		RowLayout {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+
 			CustomText {
-			text: qsTr("Output Volume (%1)")
+				text: "Output Volume"
-				.arg(Audio.muted
+				elide: Text.ElideRight
-					 ? qsTr("Muted")
+				Layout.fillWidth: true
-					 : `${Math.round(Audio.volume * 100)}%`)
+				Layout.fillHeight: true
-			font.weight: 500
+				Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+			}
+
+			CustomText {
+				text: qsTr("%1").arg(Audio.muted ? qsTr("Muted") : `${Math.round(Audio.volume * 100)}%`);
+				font.bold: true
+				Layout.fillHeight: true
+				Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+			}
 		}
 
 		CustomMouseArea {
@@ -107,13 +158,24 @@ Item {
 			}
 		}
 
+		RowLayout {
+			Layout.fillWidth: true
+			Layout.fillHeight: true
+
 			CustomText {
-			Layout.topMargin: 10
+				text: "Input Volume"
-			text: qsTr("Input Volume (%1)")
+				elide: Text.ElideRight
-				.arg(Audio.sourceMuted
+				Layout.fillWidth: true
-					 ? qsTr("Muted")
+				Layout.fillHeight: true
-					 : `${Math.round(Audio.sourceVolume * 100)}%`)
+				Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-			font.weight: 500
+			}
+
+			CustomText {
+				text: qsTr("%1").arg(Audio.sourceMuted ? qsTr("Muted") : `${Math.round(Audio.sourceVolume * 100)}%`);
+				font.bold: true
+				Layout.fillHeight: true
+				Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+			}
 		}
 
 		CustomMouseArea {
@@ -188,6 +250,9 @@ Item {
 							elideWidth: root.width - 50
 						}
 
+						RowLayout {
+							Layout.fillWidth: true
+							Layout.fillHeight: true
 							CustomText {
 								text: metrics.elidedText
 								elide: Text.ElideRight
@@ -196,6 +261,14 @@ Item {
 								Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
 							}
 
+							CustomText {
+								text: qsTr("%1").arg(appBox.modelData.audio.muted ? qsTr("Muted") : `${Math.round(appBox.modelData.audio.volume * 100)}%`);
+								font.bold: true
+								Layout.fillHeight: true
+								Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+							}
+						}
+
 						CustomMouseArea {
 							Layout.fillWidth: true
 							Layout.fillHeight: true