audio popout devices tab better spacing

Modules/AudioPopup.qml

@@ -133,53 +133,61 @@ CustomRect {
 		}
 	}
 
-	component DevicesTab: ColumnLayout {
+	component DevicesTab: Item {
-		spacing: 12
+		implicitHeight: deviceColumn.height + Appearance.padding.normal
+		implicitWidth: deviceColumn.width + Appearance.padding.normal
 
-		ButtonGroup {
+		ColumnLayout {
-			id: sinks
+			id: deviceColumn
-		}
 
-		ButtonGroup {
+			anchors.centerIn: parent
-			id: sources
+			spacing: 12
-		}
 
-		CustomText {
+			ButtonGroup {
-			font.weight: 500
+				id: sinks
-			text: qsTr("Output device")
-		}
-
-		Repeater {
-			model: Audio.sinks
-
-			CustomRadioButton {
-				required property PwNode modelData
-
-				ButtonGroup.group: sinks
-				checked: Audio.sink?.id === modelData.id
-				text: modelData.description
-
-				onClicked: Audio.setAudioSink(modelData)
 			}
-		}
 
-		CustomText {
+			ButtonGroup {
-			Layout.topMargin: 10
+				id: sources
-			font.weight: 500
+			}
-			text: qsTr("Input device")
-		}
 
-		Repeater {
+			CustomText {
-			model: Audio.sources
+				font.weight: 500
+				text: qsTr("Output device")
+			}
 
-			CustomRadioButton {
+			Repeater {
-				required property PwNode modelData
+				model: Audio.sinks
 
-				ButtonGroup.group: sources
+				CustomRadioButton {
-				checked: Audio.source?.id === modelData.id
+					required property PwNode modelData
-				text: modelData.description
 
-				onClicked: Audio.setAudioSource(modelData)
+					ButtonGroup.group: sinks
+					checked: Audio.sink?.id === modelData.id
+					text: modelData.description
+
+					onClicked: Audio.setAudioSink(modelData)
+				}
+			}
+
+			CustomText {
+				Layout.topMargin: 10
+				font.weight: 500
+				text: qsTr("Input device")
+			}
+
+			Repeater {
+				model: Audio.sources
+
+				CustomRadioButton {
+					required property PwNode modelData
+
+					ButtonGroup.group: sources
+					checked: Audio.source?.id === modelData.id
+					text: modelData.description
+
+					onClicked: Audio.setAudioSource(modelData)
+				}
 			}
 		}
 	}
@@ -366,6 +374,22 @@ CustomRect {
 					node: appBox.modelData
 				}
 
+				CustomRect {
+					id: peakFill
+
+					anchors.bottom: parent.bottom
+					anchors.left: parent.left
+					anchors.top: parent.top
+					color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
+					implicitWidth: parent.width * peak.peak
+
+					Behavior on implicitWidth {
+						Anim {
+							duration: MaterialEasing.expressiveEffectsTime
+						}
+					}
+				}
+
 				RowLayout {
 					id: layoutVolume
 
@@ -449,22 +473,6 @@ CustomRect {
 						}
 					}
 				}
-
-				CustomRect {
-					id: peakFill
-
-					anchors.bottom: parent.bottom
-					anchors.left: parent.left
-					anchors.top: parent.top
-					color: Qt.alpha(DynamicColors.palette.m3primary, 0.15)
-					implicitWidth: parent.width * peak.peak
-
-					Behavior on implicitWidth {
-						Anim {
-							duration: MaterialEasing.expressiveEffectsTime
-						}
-					}
-				}
 			}
 		}
 	}