[Admin] Payment methods accordion buttons fix (#255)

<img width="1011" height="521" alt="image"
src="https://github.com/user-attachments/assets/3580fa00-95b6-40d0-a423-f4b81b58e4d1"
/>
<img width="1053" height="610" alt="image"
src="https://github.com/user-attachments/assets/4dfe927a-489f-4ec1-89cc-0722734bb584"
/>

Author: GSadee

assets/admin/css/_accordion.scss

@@ -0,0 +1,22 @@
+.accordion-button.mollie-accordion {
+  &::after {
+    flex-shrink: 0;
+    width: var(--tblr-accordion-btn-icon-width, 1.25rem);
+    height: var(--tblr-accordion-btn-icon-width, 1.25rem);
+    margin-left: auto;
+    content: "";
+    background-image: var(--tblr-accordion-btn-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
+    background-repeat: no-repeat;
+    background-size: var(--tblr-accordion-btn-icon-width, 1.25rem);
+    transition: var(--tblr-accordion-btn-icon-transition, transform 0.2s ease-in-out);
+  }
+
+  &:not(.collapsed) {
+    opacity: 1;
+
+    &::after {
+      background-image: var(--tblr-accordion-btn-active-icon, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"));
+      transform: var(--tblr-accordion-btn-icon-transform, rotate(-180deg));
+    }
+  }
+}

assets/admin/css/main.scss

@@ -4,3 +4,4 @@
 @import './overrides';
 @import './subscription';
 @import './recurring_variant';
+@import './accordion';

templates/admin/payment_method/form/sections/gateway_configuration/mollie_payment_methods/body/accordion/item/header.html.twig

@@ -1,5 +1,5 @@
 <div class="accordion-header container-xl">
-    <div class="row">
+    <div class="row w-100">
         {% hook 'header' %}
     </div>
 </div>

templates/admin/payment_method/form/sections/gateway_configuration/mollie_payment_methods/body/accordion/item/header/accordion_button.html.twig

@@ -10,7 +10,7 @@
 
 <div class="col">
     <button
-        class="accordion-button {% if not methods_loop.first %} collapsed{% endif %}"
+        class="accordion-button mollie-accordion {% if not methods_loop.first %} collapsed{% endif %}"
         type="button"
         data-bs-toggle="collapse"
         data-bs-target="#{{ payment_method_accordion_id }}"