From a74fc27e0b5d08ee95b9e84503ee23f9401518fb Mon Sep 17 00:00:00 2001
From: FrankRua <frank.rua@safelite.com>
Date: Thu, 20 Jan 2022 12:33:58 -0500
Subject: [PATCH] Alert message CSS

---
 .../button-question/button-question.vue                  | 9 ++-------
 src/common-components/funnel-header/funnel-header.vue    | 9 +++++++--
 src/layouts/vehicle-year/vehicle-year.vue                | 2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 3d2f75893..849f5a353 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -47,13 +47,6 @@ export default {
   components: {
     listButton,
   },
-  updated() {
-
-    // Dynamically account for the header height.
-    var element = document.getElementsByClassName('overflow-scroll')[0];
-
-    element.style.height = 'calc(100% - ' + element.offsetTop + 'px)';
-  }
 };
 </script>
 
@@ -62,6 +55,8 @@ export default {
   height: calc(100vh - 280px);
 
   .overflow-scroll {
+    // Height will be determined by overall height of content above list
+    height: calc(100% - 320px);
     -webkit-overflow-scrolling: touch;
   }
 }
diff --git a/src/common-components/funnel-header/funnel-header.vue b/src/common-components/funnel-header/funnel-header.vue
index 0a3fd5219..685d7ac72 100644
--- a/src/common-components/funnel-header/funnel-header.vue
+++ b/src/common-components/funnel-header/funnel-header.vue
@@ -1,8 +1,9 @@
 <template>
 <div class="funnel-header d-flex justify-content-center align-items-center flex-column" v-if="imageSrc">
     <img class="logo-image img-fluid" :src="imageSrc" alt="Safelite logo" />
-    <alert v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
 </div>
+        <alert class="position-absolute mt-6 w-100" v-if="displayGlobalAlert" :alertClass="globalAlertMessage.type" :alertHeadline="globalAlertMessage.messageCopy" :alertCopy="globalAlertMessage.messageHeadline" v-bind:isDismissible="globalAlertMessage.isDismissible" />
+
 </template>
 
 <script>
@@ -47,8 +48,12 @@ export default {
             this.displayGlobalAlert = true;
             this.globalAlertMessage = alertEvent;
         }
-
     },
+
+    beforeUpdated(){
+    console.log(document.getElementsByClassName('alert')[0].offsetHeight);
+    }
+
 };
 </script>
 
diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue
index 69e536c1a..06acdb92d 100644
--- a/src/layouts/vehicle-year/vehicle-year.vue
+++ b/src/layouts/vehicle-year/vehicle-year.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="container-fluid shadow rounded-3 p-0">
+  <div class="container-fluid shadow rounded-3 p-0 position-relative">
     <funnelHeader ref="funnelHeader" />
     <div class="select-car">
       <div class="select-car-form rounded text-center">