controlcenter: clip/fade issue on certain collapsiblesections

1 files changed, 38 insertions, 2 deletions

diff --git a/components/controls/CollapsibleSection.qml b/components/controls/CollapsibleSection.qml
index 2df169a..7cb14a0 100644
--- a/components/controls/CollapsibleSection.qml
+++ b/components/controls/CollapsibleSection.qml
@@ -70,8 +70,15 @@ ColumnLayout {
 
     Item {
         Layout.fillWidth: true
-        Layout.preferredHeight: (root.expanded && root.description !== "") ? descriptionText.implicitHeight + Appearance.spacing.smaller + Appearance.spacing.small : 0
-        clip: true
+        Layout.preferredHeight: (root.expanded && root.description !== "") ? Math.min(descriptionText.implicitHeight + Appearance.spacing.smaller + Appearance.spacing.small, maxDescriptionHeight) : 0
+
+        readonly property real maxDescriptionHeight: 60
+
+        layer.enabled: true
+        layer.smooth: true
+        layer.effect: OpacityMask {
+            maskSource: descriptionMask
+        }
 
         Behavior on Layout.preferredHeight {
             Anim {
@@ -79,6 +86,34 @@ ColumnLayout {
             }
         }
 
+        Item {
+            id: descriptionMask
+            anchors.fill: parent
+            layer.enabled: true
+            visible: false
+
+            Rectangle {
+                anchors.fill: parent
+
+                gradient: Gradient {
+                    orientation: Gradient.Vertical
+
+                    GradientStop {
+                        position: 0.0
+                        color: Qt.rgba(0, 0, 0, 1)
+                    }
+                    GradientStop {
+                        position: 0.7
+                        color: Qt.rgba(0, 0, 0, 1)
+                    }
+                    GradientStop {
+                        position: 1.0
+                        color: Qt.rgba(0, 0, 0, 0)
+                    }
+                }
+            }
+        }
+
         StyledText {
             id: descriptionText
             anchors.left: parent.left
@@ -90,6 +125,7 @@ ColumnLayout {
             text: root.description
             color: Colours.palette.m3onSurfaceVariant
             font.pointSize: Appearance.font.size.small
+            wrapMode: Text.Wrap
             opacity: (root.expanded && root.description !== "") ? 1.0 : 0.0
 
             Behavior on opacity {