From 9b183dec36eee71b1be994eea7bb5033571390c9 Mon Sep 17 00:00:00 2001
From: nahu <ncoronel@quo.ar>
Date: Sun, 12 Jul 2026 19:22:06 +0000
Subject: [PATCH] feat(checkout-page): add host mixin for payment panel
 components to improve layout consistency

---
 .../components/payment-methods/_payment-panel.scss        | 8 ++++++++
 .../payment-methods/qr-payment-content.component.scss     | 2 ++
 .../telepagos-payment-content.component.scss              | 2 ++
 .../transfer-payment-content.component.scss               | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss b/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
index 37c44e2..adfab35 100644
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/_payment-panel.scss
@@ -1,3 +1,11 @@
+@mixin host {
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 290px;
+  }
+}
+
 @mixin card {
   &__card {
     width: 100%;
diff --git a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
index 653b867..c31a818 100644
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/qr-payment-content.component.scss
@@ -1,5 +1,7 @@
 @use 'payment-panel' as payment-panel;
 
+@include payment-panel.host;
+
 .payment-panel {
   @include payment-panel.card;
 }
diff --git a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
index 166d776..50adec5 100644
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/telepagos-payment-content.component.scss
@@ -1,5 +1,7 @@
 @use 'payment-panel' as payment-panel;
 
+@include payment-panel.host;
+
 .payment-panel {
   @include payment-panel.card;
 }
diff --git a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
index 3cd0db2..91aa8c8 100644
--- a/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
+++ b/src/app/features/store/pages/checkout-page/components/payment-methods/transfer-payment-content.component.scss
@@ -1,5 +1,7 @@
 @use 'payment-panel' as payment-panel;
 
+@include payment-panel.host;
+
 .payment-panel {
   @include payment-panel.card;