Changing list style

src/commonComponents/radioQuestion/radioQuestion.vue

@@ -3,13 +3,11 @@
     <div class="needed_car_info d-flex mt-4 mb-3">
       <span class="text-center fs-6 fw-bold needed_car_info-text">{{ questionText }}</span>
     </div>
-    <div class="list-view d-flex">
-        <div class="car_list">
-            <div v-for="answer in answers" :key="answer" class="mb-2">
-                <radio :text="answer" :value="answer" />
-            </div>
-        </div>
-    </div>
+      <div class="car_list">
+          <div v-for="answer in answers" :key="answer" class="mb-2">
+              <radio :text="answer" :value="answer" />
+          </div>
+      </div>
   </div>
 </template>
 

src/layouts/selectYear/selectYear.vue

@@ -1,15 +1,13 @@
 <template>
-  <div class="select-car sticky-lg-top py-4">
-    <div class="select-car-form overflow-hidden p-3 rounded">
-      <div class="car_info text-center">
-        <Header
-          text="Select a year to get started"
-        />
-        <radioQuestion
-          questionText="What year is your vehicle?"
-          :answers="this.years"
-        />
-      </div>
+  <div class="select-car overflow-hidden">
+    <div class="select-car-form rounded text-center">
+      <Header
+        :text="pageHeader.Text"
+      />
+      <radioQuestion
+        :questionText="radioQuestion.Question"
+        :answers="this.years"
+      />
     </div>
   </div>
 </template>
@@ -26,6 +24,8 @@ export default {
   data() {
     return {
       years: [],
+      pageHeader: {},
+      radioQuestion: {}
     };
   },
   mounted() {
@@ -38,25 +38,23 @@ export default {
           this.years = response.data.Result;
         });
 
-        // Sample Call to Mockey to represent real data being sent back from the API, and how the modles are supposed to
-        // be prosessed and passed to child components.
-         axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
-            response.data.Result.forEach((m) => {
-                switch (m.Type) {
-                    case this.widgetNames.PAGE_HEADING_WIDGET: {
-                        this.pageHeader = m.Model;
-                        break;
-                    }
-                    case this.widgetNames.RADIO_QUESTION_WIDGET: {
-                        this.radioQuestion = m.Model;
-                        break;
-                    }
-                    default: {
-                        break;
-                    }
-                }
-            })
-        });
+    axios.get("https://mockey.qa.sagaws.net/service/content/selectYear").then((response) => {
+      response.data.Result.forEach((m) => {
+          switch (m.Type) {
+              case this.widgetNames.PAGE_HEADING_WIDGET: {
+                  this.pageHeader = m.Model;
+                  break;
+              }
+              case this.widgetNames.RADIO_QUESTION_WIDGET: {
+                  this.radioQuestion = m.Model;
+                  break;
+              }
+              default: {
+                  break;
+              }
+          }
+      })
+  });
   },
   methods: {
     selectYear(year) {

src/styles/commonStyles.scss

@@ -146,24 +146,21 @@ caption {
 
 // SelectCar styles
 .select-car {
-  height: 100vh;
+  height: calc(100vh - 1rem);
 
-  .select-car-form, .car_info, .radio_question {
-      background: $white;
-      height: 100%;
+  .car_list {
+    position: absolute;
+    height: calc(100% - 1rem);
+    width: calc(100% - 1rem);
+    overflow-y: scroll;
+    overflow-x: hidden;
+  }
 
-      .list-view {
-          height: calc(100% - 230px);
-          overflow-y: scroll;
-          overflow-x: hidden;
-      }
-
-      .car_list, .current_car_info-text, .needed_car_info-text {
-          flex-shrink: 0;
-          width: 100%;
-          position: relative;
-          transition: transform .3s;
-      }
+  .current_car_info-text, .needed_car_info-text {
+      flex-shrink: 0;
+      width: 100%;
+      position: relative;
+      transition: transform .3s;
   }
 
   .current_car_info {