From b886723e2fe95dcad3b6cadae4f550591ff658ce Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Mon, 8 Jul 2024 10:19:37 -0400
Subject: [PATCH] WIP responsive style updates.

---
 src/layouts/quote/quote.vue                   |  5 ++--
 .../service-package-radio.vue                 | 23 ++++++++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 14cdcecc4..414c62149 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -20,7 +20,7 @@
                         cmsWidgetName="CashOrInsuranceQuestionWidget"
                         v-model="isInsuranceSelected"
                         groupName="CashOrInsuranceQuestion" />
-                    </div>
+                </div>
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-lg-4">
@@ -37,7 +37,7 @@
                         v-on="{ 'buttonEvent.openModal': openModalAction }"
                         validationRules="option-required"
                         isRequired />
-                    </div>
+                </div>
             </div>
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
@@ -49,7 +49,6 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
-                        class="my-5"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"
diff --git a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
index af2b85956..90f234220 100644
--- a/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
+++ b/src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue
@@ -147,16 +147,24 @@ export default {
     padding: 5px;
     width: 100%;
     color: white;
+    @include media-breakpoint-up(md) {
+        position: absolute;
+    }
 }
 .package-main {
     .package-wrapper {
-        margin: 0.5rem 0;
+        margin: 1rem 0;
         @include media-breakpoint-up(md) {
-            margin: .5rem;
+            margin: 0.5rem 0;
+        }
+        position: relative;
+        @include media-breakpoint-up(md) {
+            margin: 1rem 0.5rem;
         }
 
         label {
             display: block;
+            height: 100%;
         }
 
         input[type="radio"] {
@@ -176,16 +184,24 @@ export default {
                     0px 4px 24px -8px rgba(0, 0, 0, 0.2);
                 border-radius: 0.5rem;
                 overflow: hidden;
+                min-height: 60px;
                 @include media-breakpoint-up(md) {
                     max-height: 500px;
+                    height: 100%;
                 }
 
                 &.has-subheader {
                     min-height: 80px;
+                    @include media-breakpoint-up(md) {
+                        padding-top: 46px;
+                    }
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a !important;
+                    @include media-breakpoint-up(md) {
+                        border-radius: 0.5rem;
+                    }
+                    border: 1px solid #469d2a;
                 }
 
                 &:before {
@@ -347,6 +363,7 @@ export default {
                 display: none;
                 @include media-breakpoint-up(md) {
                     display: flex;
+                    flex-direction: column;
                 }
             }
         }