fix(theme-shared): fix overflow problem in collapse animation

npm/ng-packs/packages/theme-shared/src/lib/animations/collapse.animations.ts

@@ -1,4 +1,12 @@
-import { animate, animation, trigger, state, style, transition, useAnimation } from '@angular/animations';
+import {
+  animate,
+  animation,
+  trigger,
+  state,
+  style,
+  transition,
+  useAnimation,
+} from '@angular/animations';
 
 export const collapseY = animation(
   [
@@ -9,7 +17,10 @@ export const collapseY = animation(
 );
 
 export const collapseYWithMargin = animation(
-  [style({ 'margin-top': '0' }), animate('{{ time }} {{ easing }}', style({ 'margin-top': '-100%' }))],
+  [
+    style({ 'margin-top': '0' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })),
+  ],
   {
     params: { time: '500ms', easing: 'ease' },
   },
@@ -32,7 +43,10 @@ export const expandY = animation(
 );
 
 export const expandYWithMargin = animation(
-  [style({ 'margin-top': '-100%' }), animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' }))],
+  [
+    style({ 'margin-top': '-100%' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })),
+  ],
   {
     params: { time: '500ms', easing: 'ease' },
   },
@@ -63,11 +77,14 @@ export const collapseWithMargin = trigger('collapseWithMargin', [
 ]);
 
 export const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [
-  state('collapsed', style({ 'margin-top': '-100%' })),
+  state('collapsed', style({ 'margin-top': '-100vh' })),
   state('expanded', style({ 'margin-top': '0' })),
   transition(
     'expanded => collapsed',
     useAnimation(collapseYWithMargin, { params: { time: '200ms', easing: 'linear' } }),
   ),
-  transition('collapsed => expanded', useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } })),
+  transition(
+    'collapsed => expanded',
+    useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } }),
+  ),
 ]);