From a27d6dc11e1df6f1875f4ae02b01d16d07bb1dae Mon Sep 17 00:00:00 2001
From: Yu Long <longyu901009@gmail.com>
Date: Thu, 2 Jan 2025 15:53:36 +0100
Subject: [PATCH] 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           |  5 +++
 .../DisableOneClickConfirmation.scss          | 43 ++++++++++++-------
 .../lib/src/styles/variable-generator.scss    |  5 +--
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/polite-ladybugs-count.md

diff --git a/.changeset/polite-ladybugs-count.md b/.changeset/polite-ladybugs-count.md
new file mode 100644
index 0000000000..5cc77b868e
--- /dev/null
+++ b/.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.
\ No newline at end of file
diff --git a/packages/lib/src/components/Dropin/components/PaymentMethod/DisableOneClickConfirmation.scss b/packages/lib/src/components/Dropin/components/PaymentMethod/DisableOneClickConfirmation.scss
index f9e8b7cbcf..62bb297ed7 100644
--- a/packages/lib/src/components/Dropin/components/PaymentMethod/DisableOneClickConfirmation.scss
+++ b/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,24 +19,28 @@ $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 {
@@ -36,6 +48,7 @@ $color-alert: token(color-background-critical-strong,false);
 }
 
 .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);
diff --git a/packages/lib/src/styles/variable-generator.scss b/packages/lib/src/styles/variable-generator.scss
index ba6322943e..4da537eec7 100644
--- a/packages/lib/src/styles/variable-generator.scss
+++ b/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}');