2 files changed, 42 insertions, 7 deletions
diff --git a/modules/sidebar/NotifDock.qml b/modules/sidebar/NotifDock.qml
index 7c71da8..219ae7c 100644
--- a/modules/sidebar/NotifDock.qml
+++ b/modules/sidebar/NotifDock.qml
@@ -22,7 +22,7 @@ Item {
 
     Component.onCompleted: Notifs.list.forEach(n => n.popup = false)
 
-    StyledText {
+    Item {
         id: title
 
         anchors.top: parent.top
@@ -30,12 +30,46 @@ Item {
         anchors.right: parent.right
         anchors.margins: Appearance.padding.small
 
-        text: root.notifCount > 0 ? qsTr("%1 notification%2").arg(root.notifCount).arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
-        color: Colours.palette.m3outline
-        font.pointSize: Appearance.font.size.normal
-        font.family: Appearance.font.family.mono
-        font.weight: 500
-        elide: Text.ElideRight
+        implicitHeight: Math.max(count.implicitHeight, titleText.implicitHeight)
+
+        StyledText {
+            id: count
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: root.notifCount > 0 ? 0 : -width - titleText.anchors.leftMargin
+            opacity: root.notifCount > 0 ? 1 : 0
+
+            text: root.notifCount
+            color: Colours.palette.m3outline
+            font.pointSize: Appearance.font.size.normal
+            font.family: Appearance.font.family.mono
+            font.weight: 500
+
+            Behavior on anchors.leftMargin {
+                Anim {}
+            }
+
+            Behavior on opacity {
+                Anim {}
+            }
+        }
+
+        StyledText {
+            id: titleText
+
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: count.right
+            anchors.right: parent.right
+            anchors.leftMargin: Appearance.spacing.small
+
+            text: root.notifCount > 0 ? qsTr("notification%1").arg(root.notifCount === 1 ? "" : "s") : qsTr("Notifications")
+            color: Colours.palette.m3outline
+            font.pointSize: Appearance.font.size.normal
+            font.family: Appearance.font.family.mono
+            font.weight: 500
+            elide: Text.ElideRight
+        }
     }
 
     ClippingRectangle {
diff --git a/modules/sidebar/NotifGroup.qml b/modules/sidebar/NotifGroup.qml
index 8a3d970..95b1f4a 100644
--- a/modules/sidebar/NotifGroup.qml
+++ b/modules/sidebar/NotifGroup.qml
@@ -48,6 +48,7 @@ StyledRect {
     anchors.right: parent?.right
     implicitHeight: content.implicitHeight + Appearance.padding.normal * 2
 
+    clip: true
     radius: Appearance.rounding.normal
     color: Colours.layer(Colours.palette.m3surfaceContainer, 2)