From ff93af7e00dfa9d7f1d803c579a4efe2627d4213 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Fri, 22 Nov 2024 13:55:18 -0500
Subject: [PATCH] fix(accordion): move styles to inner element to use proper
 animation (#30032)

Moves the padding to the inner content element so the `offsetHeight` will be calculated properly and the animation will be smooth.
---
 core/src/components/accordion/accordion.ionic.scss  | 2 +-
 core/src/components/accordion/test/shape/index.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/core/src/components/accordion/accordion.ionic.scss b/core/src/components/accordion/accordion.ionic.scss
index 617bacbc50..150ccaf4a9 100644
--- a/core/src/components/accordion/accordion.ionic.scss
+++ b/core/src/components/accordion/accordion.ionic.scss
@@ -58,7 +58,7 @@
 // Accordion Content
 // --------------------------------------------------
 
-#content {
+#content-wrapper {
   @include globals.padding(null, globals.$ion-space-400, globals.$ion-space-300, globals.$ion-space-400);
   @include globals.typography(globals.$ion-body-md-regular);
 
diff --git a/core/src/components/accordion/test/shape/index.html b/core/src/components/accordion/test/shape/index.html
index 322d9ca087..2102caa295 100644
--- a/core/src/components/accordion/test/shape/index.html
+++ b/core/src/components/accordion/test/shape/index.html
@@ -11,7 +11,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(4, 1fr);
+        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }