From 4d14c07fcdbaba65d0f60fc04c5bd1847a690b0a Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 3 Dec 2025 14:41:21 -0500
Subject: [PATCH] payment page updates

feel like this is gonna need some work when we can get there.  not sure on the iframe and the 2 forms
---
 src/layouts/payment-method/payment-method.vue | 33 ++++++++++---------
 src/layouts/payment-page/payment-page.vue     | 25 ++++++++------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/layouts/payment-method/payment-method.vue b/src/layouts/payment-method/payment-method.vue
index 90d12c7b..953425f4 100644
--- a/src/layouts/payment-method/payment-method.vue
+++ b/src/layouts/payment-method/payment-method.vue
@@ -4,24 +4,19 @@
         v-slot="{ meta }"
         @submit="onSubmit"
         @invalidSubmit="onInvalidSubmit">
-        <div class="container-fluid fade-on-route-transition">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader
-                        ref="siteHeader"
-                        cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader
+                    ref="siteHeader"
+                    cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <vehicleBanner
-                        cmsWidgetName="VehicleBannerWidget"
-                        :displayGenericVehicleImage="false" />
+            <div class="iss-heritage-container-width">
+                <div class="payment-method-container iss-heritage-content-container-width">
                     <siteSubHeader
                         class="mb-5 mt-4 px-3"
                         cmsWidgetName="SiteSubHeaderWidget"
                         subTextClasses="text-center"
-                        subHeaderClasses="mt-2" />
+                        subHeaderClasses="mt-4" />
                     <div class="main-content-container">
                         <hr class="my-0" />
                         <reviewDropdown ref="reviewDropdown" />
@@ -305,10 +300,18 @@ export default {
 
 <style lang="scss" scoped>
 $page-side-padding: 1.5rem;
+.iss-heritage-container-width {
+    .payment-method-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
+    }
+}
 
 .main-content-container {
-        padding: 0;
-    }
+    padding: 0;
+}
 
 .page-container-grouped-styles {
     overflow: auto;
diff --git a/src/layouts/payment-page/payment-page.vue b/src/layouts/payment-page/payment-page.vue
index efdc2638..8ac64f7c 100644
--- a/src/layouts/payment-page/payment-page.vue
+++ b/src/layouts/payment-page/payment-page.vue
@@ -1,13 +1,11 @@
 <template>
     <Form>
-        <div class="container-fluid fade-on-route-transition">
-            <div class="row justify-content-center">
-                <div class="col-md-6 px-0 px-md-2">
-                    <siteHeader cmsWidgetName="SiteHeaderWidget" />
-                </div>
+        <div class="fade-on-route-transition">
+            <div class="justify-content-center">
+                <siteHeader cmsWidgetName="SiteHeaderWidget" />
             </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
+            <div class="iss-heritage-container-width">
+                <div class="payment-page-container iss-heritage-content-container-width">
                     <alert
                         v-if="displayPayInAdvanceCreditCardAlert"
                         name="payInAdvanceCreditCardErrorAlert"
@@ -787,12 +785,19 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.container-fluid {
-    &.fade-on-route-transition {
-        height: unset;
+.iss-heritage-container-width {
+    .payment-page-container {
+        position: relative;
+        min-height: 1px;
+        padding-left: .9375rem;
+        padding-right: .9375rem;
     }
 }
 
+.fade-on-route-transition {
+    height: unset;
+}
+
 .payment p {
     margin-bottom: 0.75rem;
 }