refactor(checkout): update layout and styles for checkout actions and payment panel

src/app/features/store/pages/checkout-page/checkout-data-step.component.scss

@@ -9,19 +9,18 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 0.5rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
     display: block;
     width: 100%;
+    flex: 1 1 253px;
+    max-width: 253px;
   }
 }
 
@@ -46,3 +45,4 @@
     color: var(--bs-danger, #dc3545);
   }
 }
+

src/app/features/store/pages/checkout-page/checkout-page.component.scss

@@ -1,7 +1,7 @@
 .checkout-page {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 420px;
-  gap: 2rem;
+  gap: 4rem;
   align-items: start;
   padding: 2rem 0;
 

src/app/features/store/pages/checkout-page/checkout-payment-step.component.html

@@ -34,7 +34,7 @@
       </div>
     </section>
 
-    <section class="payment-panel" aria-live="polite">
+    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
       @if (isGeneratingIntent()) {
         <div class="payment-panel__card" style="text-align: center; padding: 2rem;">
           <h3 class="payment-panel__title">Cargando información de pago...</h3>
@@ -133,6 +133,7 @@
       type="button"
       variant="cancel"
       hostClass="checkout-payment__action-btn"
+      buttonClass="w-100"
       (click)="cancelStep.emit()"
     >
       Cancelar
@@ -141,6 +142,7 @@
     <app-button
       type="button"
       hostClass="checkout-payment__action-btn"
+      buttonClass="w-100"
       [disabled]="isGeneratingIntent()"
       (click)="complete.emit()"
     >
@@ -148,3 +150,4 @@
     </app-button>
   </div>
 </div>
+

src/app/features/store/pages/checkout-page/checkout-payment-step.component.scss

@@ -14,17 +14,17 @@
   }
 
   &__actions {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
     gap: 1rem;
     margin-top: 2rem;
-
-    @media (max-width: 540px) {
-      grid-template-columns: 1fr;
-    }
   }
 
   &__action-btn {
+    width: 100%;
+    flex: 1 1 253px;
+    max-width: 253px;
     display: block;
   }
 }
@@ -110,10 +110,9 @@
 
 .payment-panel {
   min-width: 0;
-
   &__card {
-    width: fit-content;
-    max-width: 100%;
+    width: 100%;
+    max-width: 253px;
     min-height: 269px;
     padding: 1.5rem 1.75rem;
     border-radius: 5px;
@@ -304,3 +303,4 @@
     }
   }
 }
+