diff --git a/modules/utilities/cards/MediaList.qml b/modules/utilities/cards/MediaList.qml
index b1c1b1f6..b536addc 100644
--- a/modules/utilities/cards/MediaList.qml
+++ b/modules/utilities/cards/MediaList.qml
@@ -221,13 +221,15 @@ ColumnLayout {
                 width: bigCol.implicitWidth
                 height: bigCol.implicitHeight
                 x: Math.max(0, (phWrap.width - width) / 2)
-                // Desired center based on TARGET height; then clamped by CURRENT viewport height
-                property real desiredCenter: Math.max(0, (pseudoContainer.height - height) / 2)
+                
+                // Desired center based on CURRENT animated height to prevent overflow during animation
+                property real desiredCenter: Math.max(0, (viewport.animatedHeight - height) / 2)
+
                 y: phWrap.clampedYFor(big, viewport.expandedTarget ? big.desiredCenter : 0)
 
                 Behavior on opacity { Anim { duration: heightAnim.duration } }
                 Behavior on scale   { Anim { duration: heightAnim.duration } }
-                Behavior on y       { Anim { duration: heightAnim.duration; easing: heightAnim.easing } }
+                Behavior on y       { Anim { duration: heightAnim.duration * 0.6; easing: heightAnim.easing } }
 
                 Column {
                     id: bigCol
@@ -258,12 +260,15 @@ ColumnLayout {
                 width: smallRow.implicitWidth
                 height: smallRow.implicitHeight
                 x: Math.max(0, (phWrap.width - width) / 2)
-                property real desiredCenter: Math.max(0, (pseudoContainer.height - height) / 2)
-                y: phWrap.clampedYFor(small, viewport.expandedTarget ? 0 : small.desiredCenter)
+
+                property real desiredCenter: Math.max(0, (viewport.animatedHeight - height) / 2)
+                y: phWrap.clampedYFor(small, viewport.expandedTarget ? small.desiredCenter : small.desiredCenter)
 
                 Behavior on opacity { Anim { duration: heightAnim.duration } }
                 Behavior on scale   { Anim { duration: heightAnim.duration } }
-                Behavior on y       { Anim { duration: heightAnim.duration; easing: heightAnim.easing } }
+                // Remove Y animation for small variant to eliminate stagger during collapse
+                // Behavior on y       { Anim { duration: heightAnim.duration * 0.6; easing: heightAnim.easing } }
+
 
                 Row {
                     id: smallRow