Merge pull request #693 from Safelite/SSR-1201-global-page-padding-update

SSR-1201 update padding for all pages to be 24px. Remove unneeded code.

src/iss-components/site-header/site-header.vue

@@ -133,6 +133,9 @@ export default {
 .site-header {
     height: 56px;
     position: relative;
+    @include media-breakpoint-down(md) {
+        margin: 0 -.75rem;
+    }
 }
 #siteHeaderImage {
     width: 7.125rem;

src/layouts/access-denied/access-denied.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="page-container-grouped-styles access-denied">
         <div class="fade-on-route-transition position-relative">
-            <div class="container-fluid px-5">
+            <div class="container-fluid">
                 <div class="row mt-5">
                     <div class="col d-flex justify-content-center">
                         <span>Unauthorized Access</span>

src/layouts/order-confirmation/order-confirmation.vue

@@ -445,10 +445,6 @@ $page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
     overflow: auto;
-
-    .main-content-container {
-        padding: 0 1.5rem !important;
-    }
 }
 
 .text-color--black {

src/layouts/policy-vehicles/policy-vehicles.vue

@@ -13,7 +13,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 px-5">
+                <div class="col-md-6 col-xl-4">
                     <div class="select-car-form rounded text-center">
                         <vehicleBanner
                             cmsWidgetName="VehicleBannerWidget"

src/layouts/schedule-page/schedule-page.vue

@@ -493,10 +493,6 @@ $page-side-padding: 1.5rem;
 
 .page-container-grouped-styles {
     overflow: auto;
-
-    .main-content-container {
-        padding: 0 1.5rem !important;
-    }
 }
 
 :deep(.text-link-small) {

src/layouts/tpa-submit/deductible-box/deductible-box.spec.js

@@ -26,13 +26,12 @@ describe('deductible-box', () => {
     });
 
     it('has the correct classes', () => {
-        expect(wrapper.classes().length).toBe(6);
+        expect(wrapper.classes().length).toBe(5);
         expect(wrapper.classes()).toContain('deductible-box');
         expect(wrapper.classes()).toContain('d-flex');
         expect(wrapper.classes()).toContain('justify-content-between');
         expect(wrapper.classes()).toContain('align-items-center');
         expect(wrapper.classes()).toContain('py-2');
-        expect(wrapper.classes()).toContain('px-5');
     });
     it.each([
         ['', ''],

src/layouts/tpa-submit/deductible-box/deductible-box.vue

@@ -1,7 +1,7 @@
 <template>
     <div
         id="deductibleBox"
-        class="deductible-box d-flex justify-content-between align-items-center py-2 px-5">
+        class="deductible-box d-flex justify-content-between align-items-center py-2">
         <p
             id="deductibleLabel"
             class="deductible-box__text">

src/layouts/welcome-page/welcome-page.vue

@@ -11,7 +11,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 px-5">
+                <div class="col-md-6 col-xl-4">
                     <siteSubHeader
                         cmsWidgetName="SiteSubHeaderWidget"
                         class="mt-4" />

src/styles/bailout-common.scss

@@ -4,7 +4,6 @@ $font-size: 0.875rem;
 .fade-on-route-transition {
   > div.main-content-container {
     overflow: auto;
-    padding: 0 $page-side-padding !important;
     
     > div.sub-header-content {
       margin-top: 1rem;

src/styles/common-styles.scss

@@ -18,6 +18,7 @@ body {
             height: 100vh;
             display: flex;
             flex-direction: column;
+            padding: 0 1.5rem;
         }
 
         // Set max-width on columns to prevent overly-wide