Fix remove stored card confirmation not responsive (#3037)

* fix(DisableOneClickConfirmation.scss): remove fixed max-height and fixed animation after the removal

fixes #3028

* chore: added changeset

* style: change `adyen-checkout__payment-method__disable-confirmation__button` font size to 14px

.changeset/polite-ladybugs-count.md

@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+Fix the styles for the remove stored card confirmation to ensure responsiveness on smaller devices.

packages/lib/src/components/Dropin/components/PaymentMethod/DisableOneClickConfirmation.scss

@@ -1,8 +1,16 @@
 @import 'styles/variable-generator';
 
-$color-alert: token(color-background-critical-strong,false);
+$color-alert: token(color-background-critical-strong, false);
 
 .adyen-checkout__payment-method__disable-confirmation {
+    $component-root: &;
+
+    display: grid;
+    grid-template-rows: 0fr;
+    transition:
+        grid-template-rows token(animation-duration-moderate) token(animation-easing-linear),
+        opacity token(animation-duration-moderate) token(animation-easing-standard),
+        margin-bottom token(animation-duration-fast) token(animation-easing-linear);
     background: token(color-background-critical-strong);
     font-size: token(text-body-font-size);
     color: token(color-label-on-color);
@@ -11,31 +19,36 @@ $color-alert: token(color-background-critical-strong,false);
     overflow: hidden;
     opacity: 0;
     margin: 0 -17px;
-    max-height: 0;
-    transition:
-        opacity 0.15s ease-out,
-        max-height 0.15s linear,
-        margin-bottom 0.1s linear;
 
-    &.adyen-checkout__payment-method__disable-confirmation--open {
-        max-height: 62px;
+    &__content {
+        min-height: 0;
+        transition:
+            visibility token(animation-duration-moderate) token(animation-easing-linear),
+            padding token(animation-duration-fast) token(animation-easing-linear);
+        visibility: hidden;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &--open {
+        grid-template-rows: 1fr;
         opacity: 1;
         margin-bottom: token(spacer-070);
-    }
-}
 
-.adyen-checkout__payment-method__disable-confirmation__content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: token(spacer-040) token(spacer-070);
+        #{$component-root}__content {
+            visibility: visible;
+            padding: token(spacer-040) token(spacer-070);
+        }
+    }
 }
 
 .adyen-checkout__payment-method__disable-confirmation__buttons {
     display: flex;
 }
 
 .adyen-checkout__payment-method__disable-confirmation__button {
+    font-size: token(text-body-font-size);
     background: token(color-background-critical-strong);
     border: token(border-width-s) solid transparent;
     border-radius: token(border-radius-m);

packages/lib/src/styles/variable-generator.scss

@@ -14,14 +14,13 @@
     @return $adyen-output-map;
 }
 
-
 @function token($token, $generate-css-var: true) {
     $adyen-tokens-map: ();
 
     @if $generate-css-var {
-        $adyen-tokens-map: adyen-sdk-generate-css-variables($color, $text, $focus-ring, $border, $spacer, $shadow, $toggle);
+        $adyen-tokens-map: adyen-sdk-generate-css-variables($color, $text, $focus-ring, $border, $spacer, $shadow, $animation, $toggle);
     } @else {
-        $adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow, $toggle)
+        $adyen-tokens-map: map-merge($color, $text, $focus-ring, $border, $spacer, $shadow, $animation, $toggle);
     }
 
     @return map-get($adyen-tokens-map, '#{$token}');