fix(notification): Button text is truncated when hovering over

"Clear all" in English environment with 20 font size

- Added OpacityMask to the title container for a smooth fade-out
effect on the right side
- Enabled gradient effect only when text overflows (using width +
5px threshold)
- Made the last 10% of the text fade to transparent for a natural
visual transition

---

fix(notification): 英文环境且字体为20号，展开通知面板后，鼠标
hover到“清除全部”，此按钮未全部显示。

- 为标题容器添加 OpacityMask 实现右侧平滑淡出
- 仅在文字溢出时启用渐变（宽度 + 5px 阈值）
- 最后 10% 文字渐变透明以实现自然视觉过渡

Log: 修复通知中心在英文环境且字体为20号，展开通知面板后，鼠标hover到“清除全部”，此按钮未全部显示问题
Influence: 通知中心-顶部按钮
PMS: BUG-335143

Author: electricface

panels/notification/center/NotifyHeader.qml

@@ -5,6 +5,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import org.deepin.dtk 1.0
 import org.deepin.ds.notification
 import org.deepin.ds.notificationcenter
@@ -45,16 +46,37 @@ FocusScope {
 
     RowLayout {
         anchors.fill: parent
-        NotifyHeaderTitleText {
-            text: qsTr("Notification Center")
+        spacing: 8
+        // Title container with fade-out effect when compressed by buttons
+        Item {
+            id: titleContainer
             Layout.alignment: Qt.AlignLeft
             Layout.leftMargin: 18
-            tFont: DTK.fontManager.t4
-        }
-
-        Item {
             Layout.fillWidth: true
-            Layout.preferredHeight: 1
+            implicitHeight: titleText.implicitHeight
+
+            // Enable opacity mask only when text overflows container
+            layer.enabled: titleText.implicitWidth > titleContainer.width + 5
+            layer.effect: OpacityMask {
+                maskSource: Rectangle {
+                    width: titleContainer.width
+                    height: titleContainer.height
+                    // Horizontal gradient: fully visible on left, fade to transparent on right
+                    gradient: Gradient {
+                        orientation: Gradient.Horizontal
+                        GradientStop { position: 0.0; color: "#FFFFFFFF" }  // Fully opaque
+                        GradientStop { position: 0.9; color: "#FFFFFFFF" }  // Still opaque at 90%
+                        GradientStop { position: 1.0; color: "#00FFFFFF" }  // Fully transparent
+                    }
+                }
+            }
+
+            NotifyHeaderTitleText {
+                id: titleText
+                text: qsTr("Notification Center")
+                elide: Text.ElideNone
+                tFont: DTK.fontManager.t4
+            }
         }
 
         AnimationSettingButton {