left-bar working, bottom bar semi-broken

Modules/MediaWidget.qml

@@ -9,11 +9,13 @@ CustomRect {
 	id: root
 
 	readonly property string currentMedia: (Players.active?.trackTitle ?? qsTr("No media")) || qsTr("Unknown title")
+	required property bool horizontal
 	readonly property int textWidth: Math.min(metrics.width, 200)
 
+	anchors.fill: parent
 	color: DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: layout.implicitWidth + Appearance.padding.normal * 2
+	implicitHeight: horizontal ? Config.bar.height + Appearance.padding.smallest * 2 : layout.implicitHeight + Appearance.padding.normal * 2
+	implicitWidth: horizontal ? layout.implicitWidth + Appearance.padding.normal * 2 : Config.bar.height + Appearance.padding.smallest
 	radius: Appearance.rounding.full
 
 	Behavior on implicitWidth {
@@ -28,10 +30,11 @@ CustomRect {
 		text: mediatext.text
 	}
 
-	RowLayout {
+	GridLayout {
 		id: layout
 
 		anchors.centerIn: parent
+		columns: root.horizontal ? -1 : 1
 
 		Behavior on implicitWidth {
 			Anim {
@@ -39,6 +42,7 @@ CustomRect {
 		}
 
 		MaterialIcon {
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.larger
@@ -48,7 +52,8 @@ CustomRect {
 		MarqueeText {
 			id: mediatext
 
-			Layout.preferredWidth: root.textWidth
+			Layout.alignment: root.horizontal ? Qt.AlignVCenter : Qt.AlignHCenter
+			Layout.preferredHeight: root.horizontal ? root.height : root.textWidth
 			animate: true
 			color: Players.active?.isPlaying ? DynamicColors.palette.m3primary : DynamicColors.palette.m3onSurface
 			font.pointSize: Appearance.font.size.normal
@@ -58,6 +63,17 @@ CustomRect {
 			text: root.currentMedia
 			width: root.textWidth
 
+			transform: [
+				Translate {
+					x: !root.horizontal ? -root.textWidth + mediatext.implicitHeight : 0
+				},
+				Rotation {
+					angle: root.horizontal ? 0 : 270
+					origin.x: mediatext.implicitHeight / 2
+					origin.y: mediatext.implicitHeight / 2
+				}
+			]
+
 			CustomMouseArea {
 				anchors.fill: parent
 				hoverEnabled: true