From 47af82ee10687538bae0c725d381f18f5b154c8b Mon Sep 17 00:00:00 2001
From: Max <maxwell.dempsey@safelite.com>
Date: Tue, 21 Dec 2021 14:57:23 -0500
Subject: [PATCH] Updating back button and funnel header to align when text
 wraps to more than one line

---
 .../funnel-sub-header/funnel-sub-header.vue           | 11 ++++-------
 src/ux-components/button-back/button-back.vue         |  7 ++++++-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.vue b/src/common-components/funnel-sub-header/funnel-sub-header.vue
index 946de7c54..a5d23a2e7 100644
--- a/src/common-components/funnel-sub-header/funnel-sub-header.vue
+++ b/src/common-components/funnel-sub-header/funnel-sub-header.vue
@@ -1,18 +1,15 @@
 <template>
   <div class="current_car_info-text">
-    <div class="d-flex align-items-center justify-content-center">
+    <div class="d-flex align-items-center justify-content-center container-fluid">
       <h2 class="text-center fs-5 d-block fw-normal mb-0">
-        <p class="m-0" v-if="hasBackButton">
-          {{ text }}
-        </p>
-        <span v-else>
+        <span>
           {{ text }}
         </span>
-      </h2>
-      <buttonBack
+        <buttonBack
         v-if="hasBackButton"
         :backButtonAction="backButtonAction"
       />
+      </h2>
     </div>
   </div>
 </template>
diff --git a/src/ux-components/button-back/button-back.vue b/src/ux-components/button-back/button-back.vue
index 6a75ac02e..d24a29a76 100644
--- a/src/ux-components/button-back/button-back.vue
+++ b/src/ux-components/button-back/button-back.vue
@@ -2,7 +2,7 @@
   <button
     v-if="backButtonAction"
     @click="backButtonAction"
-    class="back-button-wrapper d-flex p-3" 
+    class="back-button-wrapper p-3" 
     :aria-label="backButtonAccessibleText"
   >
     <div class="button-back">
@@ -35,6 +35,9 @@ export default {
   background: transparent;
   text-decoration: none;
   border-bottom: none;
+  // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+  margin-bottom: -6px;
+  margin-top: -6px;
 
   .button-back {
     display: inline-flex;
@@ -42,6 +45,8 @@ export default {
     height: 18px;
     width: 23px;
     overflow: hidden;
+     // Account for padding while still being inline with heading text (for cases where text wraps to 2 lines)
+    margin-bottom: -2px;
     .arrow-left {
       position: absolute;
       width: 18px;