fix: remove clippingrectangle in favor of passing radius to sub-items

Modules/Dashboard/Content.qml

@@ -11,8 +11,8 @@ import qs.Components
 Item {
 	id: root
 
-	readonly property real nonAnimWidth: view.implicitWidth + clipWrapper.anchors.margins * 2
+	readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
-	readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + clipWrapper.anchors.margins + clipWrapper.anchors.topMargin
+	readonly property real nonAnimHeight: tabs.implicitHeight + tabs.anchors.topMargin + view.implicitHeight + viewWrapper.anchors.margins + viewWrapper.anchors.topMargin
 
 	required property ScreenState screenState
 
@@ -74,115 +74,118 @@ Item {
 		anchors.margins: Tokens.padding.small
 	}
 
-	CustomClippingRect {
+	Item {
-		id: clipWrapper
+		id: viewWrapper
+
+		property int radius: Tokens.rounding.extraLarge - anchors.margins
+
 		anchors.top: tabs.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
 		anchors.bottom: parent.bottom
 		anchors.topMargin: Tokens.spacing.small
 		anchors.margins: Tokens.padding.small
-		radius: Tokens.rounding.extraLarge - anchors.margins
+		clip: true
 
-		Item {
+		Flickable {
-			id: viewWrapper
+			id: view
+
+			readonly property int currentIndex: root.screenState.dashboardTab
+			readonly property Item currentItem: {
+				repeater.count;
+				return repeater.itemAt(currentIndex);
+			}
 
 			anchors.fill: parent
 
-			Flickable {
+			implicitWidth: currentItem?.implicitWidth ?? 0
-				id: view
+			implicitHeight: currentItem?.implicitHeight ?? 0
 
-				readonly property int currentIndex: root.screenState.dashboardTab
+			contentX: currentItem?.x ?? 0
-				readonly property Item currentItem: {
+			contentWidth: row.implicitWidth
-					repeater.count;
+			contentHeight: row.implicitHeight
-					return repeater.itemAt(currentIndex);
-				}
 
-				anchors.fill: parent
+			interactive: false
 
-				implicitWidth: currentItem?.implicitWidth ?? 0
+			onContentXChanged: {
-				implicitHeight: currentItem?.implicitHeight ?? 0
+				if (!moving || !currentItem)
+					return;
 
-				contentX: currentItem?.x ?? 0
+				const x = contentX - currentItem.x;
-				contentWidth: row.implicitWidth
+				if (x > currentItem.implicitWidth / 2)
-				contentHeight: row.implicitHeight
+					root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
+				else if (x < -currentItem.implicitWidth / 2)
+					root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
+			}
 
-				interactive: false
+			RowLayout {
+				id: row
 
-				onContentXChanged: {
+				Repeater {
-					if (!moving || !currentItem)
+					id: repeater
-						return;
 
-					const x = contentX - currentItem.x;
+					model: ScriptModel {
-					if (x > currentItem.implicitWidth / 2)
+						values: root.dashboardTabs
-						root.screenState.dashboardTab = Math.min(root.screenState.dashboardTab + 1, tabs.count - 1);
+					}
-					else if (x < -currentItem.implicitWidth / 2)
-						root.screenState.dashboardTab = Math.max(root.screenState.dashboardTab - 1, 0);
-				}
 
-				RowLayout {
+					delegate: Loader {
-					id: row
+						id: paneLoader
 
-					Repeater {
+						required property int index
-						id: repeater
+						required property var modelData
 
-						model: ScriptModel {
+						Layout.alignment: Qt.AlignTop
-							values: root.dashboardTabs
-						}
 
-						delegate: Loader {
+						sourceComponent: modelData.component
-							id: paneLoader
 
-							required property int index
+						Component.onCompleted: active = Qt.binding(() => {
-							required property var modelData
+							if (index === view.currentIndex)
-
+								return true;
-							Layout.alignment: Qt.AlignTop
+							const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
-
+							const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
-							sourceComponent: modelData.component
+							return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
-
+						})
-							Component.onCompleted: active = Qt.binding(() => {
-								if (index === view.currentIndex)
-									return true;
-								const vx = Math.floor(view.visibleArea.xPosition * view.contentWidth);
-								const vex = Math.floor(vx + view.visibleArea.widthRatio * view.contentWidth);
-								return (vx >= x && vx <= x + implicitWidth) || (vex >= x && vex <= x + implicitWidth);
-							})
-						}
 					}
 				}
+			}
 
-				Component {
+			Component {
-					id: dashComponent
+				id: dashComponent
 
-					Dash {
+				Dash {
-						screenState: root.screenState
+					screenState: root.screenState
-					}
+					radius: viewWrapper.radius
 				}
+			}
 
-				Component {
+			Component {
-					id: weatherComponent
+				id: weatherComponent
 
-					WeatherTab {}
+				WeatherTab {
+					radius: viewWrapper.radius
 				}
+			}
 
-				Component {
+			Component {
-					id: mediaComponent
+				id: mediaComponent
 
-					Media {
+				Media {
-						screenState: root.screenState
+					screenState: root.screenState
-					}
+					radius: viewWrapper.radius
 				}
+			}
 
-				Component {
+			Component {
-					id: procsComponent
+				id: procsComponent
 
-					ProcessesTab {}
+				ProcessesTab {
+					radius: viewWrapper.radius
 				}
+			}
 
-				Behavior on contentX {
+			Behavior on contentX {
-					Anim {
+				Anim {
-						type: Anim.DefaultEffects
+					type: Anim.DefaultEffects
-					}
 				}
 			}
 		}

Modules/Dashboard/Dash.qml

@@ -12,7 +12,7 @@ GridLayout {
 	id: root
 
 	readonly property bool dashboardVisible: screenState.dashboard
-	property int radius: Tokens.rounding.medium
+	required property int radius
 	required property ScreenState screenState
 
 	columnSpacing: Tokens.spacing.small

Modules/Dashboard/Media.qml

@@ -11,12 +11,18 @@ Item {
 	id: root
 
 	property ScreenState screenState
+	required property int radius
 
 	implicitWidth: 1000
 	implicitHeight: 320
 
-	BackgroundShapes {
+	CustomClippingRect {
 		anchors.fill: parent
+		radius: root.radius
+
+		BackgroundShapes {
+			anchors.fill: parent
+		}
 	}
 
 	RowLayout {

Modules/Dashboard/Processes/SystemInfo.qml

@@ -11,6 +11,8 @@ import qs.Services
 Item {
 	id: root
 
+	required property int radius
+
 	implicitHeight: layout.implicitHeight
 
 	ServiceRef {
@@ -53,7 +55,7 @@ Item {
 		property list<var> values
 
 		color: Colors.tPalette.m3surfaceContainer
-		radius: Tokens.rounding.largeIncreased
+		radius: root.radius
 		Layout.fillWidth: true
 		Layout.fillHeight: true
 		implicitHeight: mainLayout.implicitHeight + mainLayout.anchors.margins * 2

Modules/Dashboard/ProcessesTab.qml

@@ -9,6 +9,8 @@ import qs.Services
 Item {
 	id: root
 
+	required property int radius
+
 	implicitWidth: Tokens.sizes.dashboard.processesWidth
 	implicitHeight: Tokens.sizes.dashboard.processesHeight
 
@@ -47,5 +49,6 @@ Item {
 		anchors.bottom: parent.bottom
 		anchors.left: parent.left
 		anchors.right: parent.right
+		radius: root.radius
 	}
 }

Modules/Dashboard/WeatherTab.qml

@@ -1,3 +1,5 @@
+pragma ComponentBehavior: Bound
+
 import QtQuick
 import QtQuick.Layouts
 import ZShell.Config
@@ -9,6 +11,7 @@ import qs.Helpers
 Item {
 	id: root
 
+	required property int radius
 	readonly property var today: Weather.forecast && Weather.forecast.length > 0 ? Weather.forecast[0] : null
 
 	implicitWidth: layout.implicitWidth > 800 ? layout.implicitWidth : 840
@@ -136,7 +139,7 @@ Item {
 					Layout.fillWidth: true
 					implicitHeight: forecastItemColumn.implicitHeight + Tokens.padding.medium * 2
 
-					radius: Tokens.rounding.large
+					radius: root.radius
 					color: Colors.tPalette.m3surfaceContainer
 
 					ColumnLayout {