feat: improve responsiveness of checkout payment panel and help sidebar components

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

@@ -34,7 +34,7 @@
       </div>
     </section>
 
-    <section class="payment-panel d-flex justify-content-end" aria-live="polite">
+    <section class="payment-panel" 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>

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

@@ -32,6 +32,11 @@
 .payment-methods {
   min-width: 0;
 
+  @media (max-width: 760px) {
+    width: min(100%, 300px);
+    justify-self: center;
+  }
+
   &__title {
     margin: 0 0 1.75rem;
     color: #8a8a8a;
@@ -109,8 +114,22 @@
 }
 
 .payment-panel {
+  display: flex;
+  justify-content: flex-end;
   min-width: 0;
 
+  > app-checkout-payment-qr,
+  > app-checkout-payment-transfer,
+  > app-checkout-payment-telepagos {
+    display: block;
+    width: 100%;
+    max-width: 320px;
+  }
+
+  @media (max-width: 760px) {
+    justify-content: center;
+  }
+
   &__card {
     width: 100%;
     max-width: 320px;

src/app/features/store/pages/help-page/components/help-sidebar/help-sidebar.scss

@@ -50,8 +50,13 @@
 }
 
 @media (max-width: 767.98px) {
+  .help-sidebar__title {
+    text-align: center;
+  }
+
   .help-sidebar__nav {
     flex-flow: row wrap;
+    justify-content: center;
     gap: 0.75rem 1.25rem;
   }
 }

src/app/features/store/pages/help-page/pages/contact-page/contact-page.scss

@@ -122,6 +122,30 @@
   }
 }
 
+@media (max-width: 767.98px) {
+  .contact-page__details {
+    align-items: center;
+    text-align: center;
+  }
+
+  .contact-page__title {
+    width: 100%;
+  }
+
+  .contact-page__location {
+    width: 100%;
+  }
+
+  .contact-page__location-title {
+    justify-content: center;
+  }
+
+  .contact-page__addresses {
+    padding-left: 0;
+    list-style-position: inside;
+  }
+}
+
 @media (max-width: 575.98px) {
   .contact-page__map::ng-deep .location-map {
     min-height: 16rem;

src/app/features/store/pages/help-page/pages/faq-page/faq-page.scss

@@ -26,3 +26,9 @@
   color: #888888;
   font-size: 0.8125rem;
 }
+
+@media (max-width: 767.98px) {
+  .faq-page__title {
+    text-align: center;
+  }
+}