From 123f545c24808f3b03f138808a3ba8b2cc816cc5 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 17 Dec 2025 15:03:59 -0500
Subject: [PATCH] tpa-search header update

---
 src/layouts/tpa-search/tpa-search.vue | 212 +++++++++++++-------------
 1 file changed, 105 insertions(+), 107 deletions(-)

diff --git a/src/layouts/tpa-search/tpa-search.vue b/src/layouts/tpa-search/tpa-search.vue
index de33f4bb..9476a7ad 100644
--- a/src/layouts/tpa-search/tpa-search.vue
+++ b/src/layouts/tpa-search/tpa-search.vue
@@ -1,115 +1,113 @@
 <template>
-    <div class="container-fluid fade-on-route-transition">
-        <div class="row justify-content-center">
-            <div class="col-md-6 px-0 px-md-2">
-                <siteHeader
-                    ref="siteHeader"
-                    :cmsWidgetName="widget.siteHeader" />
-            </div>
+    <div class="fade-on-route-transition">
+        <div class="justify-content-center">
+            <siteHeader
+                ref="siteHeader"
+                :cmsWidgetName="widget.siteHeader" />
         </div>
-        <div class="row justify-content-center">
-            <div class="col-md-6 col-xl-4">
-                <Form
-                    id="searchProvidersForm"
-                    @submit="onSubmit"
-                    @invalidSubmit="onInvalidSubmit">
-                    <label
-                        id="tpaSearchQuestionLabel"
-                        for="tpaSearchQuestionField"
-                        class="text-center fs-5 mt-5 mb-0 text-black w-100">
-                        {{ tpaSearchQuestionLabel }}
-                    </label>
-                    <label
-                        id="searchInstructions"
-                        for="tpaSearchQuestionField"
-                        class="text-center small darker-gray w-100 mb-4">
-                        {{ searchInstructionsText }}
-                    </label>
-                    <div class="mb-5">
-                        <textboxQuestion
-                            id="tpaSearchQuestionField"
-                            v-model="zipCode"
-                            inputId="tpaSearchQuestionFieldInput"
-                            :cmsWidgetName="widget.tpaSearchQuestion"
-                            :includeSearchIcon="true"
-                            :displayQuestionText="false"
-                            isRequired
-                            :isDisabled="reloadingProviders"
-                            :validationRules="rules.zipCode"
-                            @clickEvent="searchClick" />
-                    </div>
-                </Form>
-            </div>
-        </div>
-        <div class="row justify-content-center">
-            <div class="col-md-6 col-xl-4">
-                <googleMap
-                    id="map"
-                    class="mb-4"
-                    :markers="providerAddresses"
-                    :zipCode="mapZipCode" />
-                <Form
-                    id="providerSelectionForm"
-                    v-slot="{ meta }"
-                    @submit="onSubmit"
-                    @invalidSubmit="onInvalidSubmit">
-                    <dropdownQuestion
-                        id="searchRadiusFilter"
-                        v-model="filter"
-                        :cmsWidgetName="widget.filterByQuestion"
-                        inputId="searchRadiusFilterInput"
-                        :options="filterOptions"
-                        disableAutoFill
-                        :isDisabled="reloadingProviders"
-                        :validationRules="rules.filter" />
-                    <loader
-                        v-if="reloadingProviders"
-                        id="providersLoader"
-                        loaderPosition="center"
-                        loaderColor="blue"
-                        :width="2"
-                        :height="2"
-                        class="my-4" />
-                    <div v-else>
-                        <div class="my-4">
-                            <buttonQuestion
-                                id="selectProviderQuestion"
-                                v-model="selectedProviderNumber"
-                                buttonTypeString="shopListButton"
-                                :buttonTypeObject="shopListButton"
-                                class="radioQuestion"
-                                :answers="providerButtonData"
-                                groupName="chooseShop"
-                                textPosition="text-start"
+        <div class="iss-heritage-container-width">
+            <div class="tpa-search-container iss-heritage-content-container-width">
+                <div class="zip-code-container">
+                    <Form
+                        id="searchProvidersForm"
+                        @submit="onSubmit"
+                        @invalidSubmit="onInvalidSubmit">
+                        <label
+                            id="tpaSearchQuestionLabel"
+                            for="tpaSearchQuestionField"
+                            class="text-center fs-5 mt-5 mb-0 text-black w-100">
+                            {{ tpaSearchQuestionLabel }}
+                        </label>
+                        <label
+                            id="searchInstructions"
+                            for="tpaSearchQuestionField"
+                            class="text-center small darker-gray w-100 mb-4">
+                            {{ searchInstructionsText }}
+                        </label>
+                        <div class="mb-5">
+                            <textboxQuestion
+                                id="tpaSearchQuestionField"
+                                v-model="zipCode"
+                                inputId="tpaSearchQuestionFieldInput"
+                                :cmsWidgetName="widget.tpaSearchQuestion"
+                                :includeSearchIcon="true"
+                                :displayQuestionText="false"
                                 isRequired
-                                :validationRules="rules.provider"
-                                :additionalButtonData="additionalButtonData" />
-                            <alert
-                                v-if="providers?.length === 0 ?? true"
-                                id="alertNoNetworkProviders"
-                                :cmsWidgetName="widget.noNetworkShopsAlert"
-                                alertClass="alert-warning"
-                                :isDismissible="false"
-                                :manualHeadline="
-                                    noNetworkShopsAlertHeaderText
-                                " />
+                                :isDisabled="reloadingProviders"
+                                :validationRules="rules.zipCode"
+                                @clickEvent="searchClick" />
                         </div>
-                        <div class="text-center">
-                            <textLink
-                                id="preferredShopNotListedLink"
-                                linkType="navigation"
-                                href="javascript:void(0)"
-                                :text="shopNotListedModalLink"
-                                @clickEvent="doNotSeeMyShopLinkClick" />
+                    </Form>
+                </div>
+                <div class="map-selection-container">
+                    <googleMap
+                        id="map"
+                        class="mb-4"
+                        :markers="providerAddresses"
+                        :zipCode="mapZipCode" />
+                    <Form
+                        id="providerSelectionForm"
+                        v-slot="{ meta }"
+                        @submit="onSubmit"
+                        @invalidSubmit="onInvalidSubmit">
+                        <dropdownQuestion
+                            id="searchRadiusFilter"
+                            v-model="filter"
+                            :cmsWidgetName="widget.filterByQuestion"
+                            inputId="searchRadiusFilterInput"
+                            :options="filterOptions"
+                            disableAutoFill
+                            :isDisabled="reloadingProviders"
+                            :validationRules="rules.filter" />
+                        <loader
+                            v-if="reloadingProviders"
+                            id="providersLoader"
+                            loaderPosition="center"
+                            loaderColor="blue"
+                            :width="2"
+                            :height="2"
+                            class="my-4" />
+                        <div v-else>
+                            <div class="my-4">
+                                <buttonQuestion
+                                    id="selectProviderQuestion"
+                                    v-model="selectedProviderNumber"
+                                    buttonTypeString="shopListButton"
+                                    :buttonTypeObject="shopListButton"
+                                    class="radioQuestion"
+                                    :answers="providerButtonData"
+                                    groupName="chooseShop"
+                                    textPosition="text-start"
+                                    isRequired
+                                    :validationRules="rules.provider"
+                                    :additionalButtonData="additionalButtonData" />
+                                <alert
+                                    v-if="providers?.length === 0 ?? true"
+                                    id="alertNoNetworkProviders"
+                                    :cmsWidgetName="widget.noNetworkShopsAlert"
+                                    alertClass="alert-warning"
+                                    :isDismissible="false"
+                                    :manualHeadline="
+                                        noNetworkShopsAlertHeaderText
+                                    " />
+                            </div>
+                            <div class="text-center">
+                                <textLink
+                                    id="preferredShopNotListedLink"
+                                    linkType="navigation"
+                                    href="javascript:void(0)"
+                                    :text="shopNotListedModalLink"
+                                    @clickEvent="doNotSeeMyShopLinkClick" />
+                            </div>
+                            <siteFooter
+                                ref="siteFooter"
+                                :cmsWidgetName="widget.siteFooter"
+                                :isForwardActionDisabled="!meta.valid"
+                                @ForwardClicked="forwardButtonAction"
+                                @backClicked="navigateBack" />
                         </div>
-                        <siteFooter
-                            ref="siteFooter"
-                            :cmsWidgetName="widget.siteFooter"
-                            :isForwardActionDisabled="!meta.valid"
-                            @ForwardClicked="forwardButtonAction"
-                            @backClicked="navigateBack" />
-                    </div>
-                </Form>
+                    </Form>
+                </div>
             </div>
         </div>
     </div>