left-bar working, bottom bar semi-broken

Modules/SysTray/TrayWidget.qml

@@ -8,12 +8,15 @@ import qs.Config
 import qs.Modules.SysTray.Widgets
 import qs.Modules
 
-RowLayout {
+GridLayout {
 	id: root
 
+	required property bool horizontal
 	readonly property alias items: repeater
-	required property RowLayout loader
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: horizontal ? sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small : sysTray.implicitHeight + sysTrayMod.implicitHeight + Appearance.padding.small
 
 	function closestRowChild(row, x) {
 		let child = row.childAt(x, row.height / 2);
@@ -80,9 +83,11 @@ RowLayout {
 		return null;
 	}
 
-	height: Config.bar.height + Appearance.padding.smallest * 2
-	spacing: Appearance.padding.small
-	width: sysTray.implicitWidth + sysTrayMod.implicitWidth + Appearance.padding.small
+	columnSpacing: Appearance.padding.small
+	columns: horizontal ? -1 : 1
+	height: horizontal ? shortSize : size
+	rowSpacing: Appearance.padding.small
+	width: horizontal ? size : shortSize
 
 	CustomClippingRect {
 		id: sysTray
@@ -94,11 +99,18 @@ RowLayout {
 		radius: Appearance.rounding.full
 		topRightRadius: Appearance.rounding.smallest / 2
 
-		Row {
+		GridLayout {
 			id: sysRow
 
+			anchors.bottom: root.horizontal ? undefined : parent.bottom
 			anchors.centerIn: parent
-			spacing: 0
+			anchors.horizontalCenter: root.horizontal ? parent.horizontalCenter : undefined
+			anchors.left: root.horizontal ? undefined : parent.left
+			anchors.right: root.horizontal ? undefined : parent.right
+			anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
+			columnSpacing: Appearance.spacing.small / 2
+			columns: root.horizontal ? -1 : 1
+			rowSpacing: Appearance.spacing.small / 2
 
 			Repeater {
 				id: repeater
@@ -125,10 +137,12 @@ RowLayout {
 	CustomClippingRect {
 		id: sysTrayMod
 
-		Layout.fillHeight: true
+		Layout.fillHeight: root.horizontal
+		Layout.fillWidth: !root.horizontal
 		bottomLeftRadius: Appearance.rounding.smallest / 2
 		color: DynamicColors.tPalette.m3surfaceContainer
-		implicitWidth: sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal
+		implicitHeight: root.horizontal ? sysIcons.implicitHeight : sysIcons.implicitHeight + Appearance.padding.smaller + Appearance.padding.normal
+		implicitWidth: root.horizontal ? sysIcons.implicitWidth + Appearance.padding.smaller + Appearance.padding.normal : sysIcons.implicitWidth
 		radius: Appearance.rounding.full
 		topLeftRadius: Appearance.rounding.smallest / 2
 
@@ -138,6 +152,7 @@ RowLayout {
 			anchors.fill: parent
 			anchors.leftMargin: Appearance.padding.smaller
 			anchors.rightMargin: Appearance.padding.normal
+			horizontal: root.horizontal
 		}
 	}
 }