left-bar working, bottom bar semi-broken

Modules/Clock.qml

@@ -9,27 +9,45 @@ import qs.Components
 CustomRect {
 	id: root
 
-	required property RowLayout loader
+	required property bool horizontal
+	required property GridLayout loader
 	required property Wrapper popouts
+	readonly property real shortSize: Config.bar.height + Appearance.padding.smallest * 2
+	readonly property real size: timeText.contentWidth + (horizontal ? Appearance.padding.normal : Appearance.padding.larger) * 2
 	required property PersistentProperties visibilities
 
+	anchors.fill: parent
 	color: visibilities.dashboard ? DynamicColors.palette.m3primary : DynamicColors.tPalette.m3surfaceContainer
-	implicitHeight: Config.bar.height + Appearance.padding.smallest * 2
-	implicitWidth: timeText.contentWidth + Appearance.padding.normal * 2
+	implicitHeight: horizontal ? shortSize : size
+	implicitWidth: horizontal ? size : shortSize
 	radius: Appearance.rounding.full
 
 	CustomText {
 		id: timeText
 
 		anchors.centerIn: parent
+		// anchors.horizontalCenter: root.horizontal ? undefined : parent.horizontalCenter
+		// anchors.verticalCenter: root.horizontal ? parent.verticalCenter : undefined
 		color: root.visibilities.dashboard ? DynamicColors.palette.m3onPrimary : DynamicColors.palette.m3onSurface
 		font: Appearance.font.family.mono // qmllint disable incompatible-type
+		height: root.horizontal ? implicitHeight : implicitWidth
 		text: Time.dateStr
+		width: root.horizontal ? implicitWidth : implicitHeight
 
 		Behavior on color {
 			CAnim {
 			}
 		}
+		transform: [
+			Translate {
+				x: !root.horizontal ? -timeText.implicitWidth + timeText.implicitHeight : 0
+			},
+			Rotation {
+				angle: root.horizontal ? 0 : 270
+				origin.x: timeText.implicitHeight / 2
+				origin.y: timeText.implicitHeight / 2
+			}
+		]
 	}
 
 	StateLayer {