From 30922024863a9e3714f4132cfcb74237187d5e30 Mon Sep 17 00:00:00 2001
From: lauramargar <114984466+lauramargar@users.noreply.github.com>
Date: Wed, 9 Oct 2024 10:03:19 +0200
Subject: [PATCH] fix(empathize): hide empathize if it has no content (#511)

---
 .../desktop/desktop-header-floating-predictive.vue   |  2 +-
 src/components/mobile/mobile.vue                     |  4 +---
 .../predictive-layer/full-width-predictive.vue       |  6 +++---
 src/components/predictive-layer/predictive-layer.vue | 12 +++++++++---
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/components/desktop/desktop-header-floating-predictive.vue b/src/components/desktop/desktop-header-floating-predictive.vue
index 68ad53b9..1777269d 100644
--- a/src/components/desktop/desktop-header-floating-predictive.vue
+++ b/src/components/desktop/desktop-header-floating-predictive.vue
@@ -7,7 +7,7 @@
         <div class="x-relative">
           <SearchBox />
           <LocationProvider location="predictive_layer">
-            <PredictiveLayer class="x-absolute x-shadow-lg desktop:x-py-16 desktop:x-pl-16" />
+            <PredictiveLayer class="x-absolute x-shadow-lg" />
           </LocationProvider>
         </div>
       </div>
diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index f37917b8..0d49f599 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -13,9 +13,7 @@
 
     <div class="x-layout-expand" :class="{ 'x-layout-stack': x.query.search }">
       <LocationProvider location="predictive_layer" class="x-z-10">
-        <PredictiveLayer
-          :class="{ 'x-mb-40 x-border-b x-border-neutral-10 x-pb-16': !x.query.search }"
-        />
+        <PredictiveLayer />
       </LocationProvider>
 
       <!-- Results -->
diff --git a/src/components/predictive-layer/full-width-predictive.vue b/src/components/predictive-layer/full-width-predictive.vue
index 9c818fdc..45ab3cf0 100644
--- a/src/components/predictive-layer/full-width-predictive.vue
+++ b/src/components/predictive-layer/full-width-predictive.vue
@@ -4,12 +4,12 @@
       @EmpathizeOpened="handleEmpathizeEvent('EmpathizeOpened')"
       @EmpathizeClosed="handleEmpathizeEvent('EmpathizeClosed')"
       :animation="empathizeAnimation"
-      class="x-layout-item x-absolute x-z-[1] x-w-full x-bg-neutral-0 x-py-4"
+      class="x-layout-item x-absolute x-z-[1] x-w-full x-bg-neutral-0"
     >
       <MaxDesktopWidthItem>
         <DesktopSearchboxAlign>
           <div class="x-layout-item">
-            <div v-if="showEmpathize || showIdentifierResults" class="x-h-full x-py-12 x-pl-[17px]">
+            <div v-if="showEmpathize || showIdentifierResults" class="x-h-full x-py-16 x-pl-[17px]">
               <div class="x-block">
                 <BaseKeyboardNavigation
                   class="x-flex x-items-start x-gap-24"
@@ -128,7 +128,7 @@
       </MaxDesktopWidthItem>
     </Empathize>
 
-    <div class="x-opacity-30">
+    <div v-if="showEmpathize" class="x-opacity-30">
       <Fade tag="div">
         <div
           v-if="showOverlay"
diff --git a/src/components/predictive-layer/predictive-layer.vue b/src/components/predictive-layer/predictive-layer.vue
index e4a68946..1d0f8370 100644
--- a/src/components/predictive-layer/predictive-layer.vue
+++ b/src/components/predictive-layer/predictive-layer.vue
@@ -1,13 +1,19 @@
 <template>
   <Empathize
     :animation="empathizeAnimation"
-    class="x-bg-neutral-0 desktop:x-z-[1] desktop:x-w-full"
+    class="desktop:x-z-[1] desktop:x-w-full"
+    :class="{ 'x-bg-neutral-0': !x.query.search || isDesktopOrGreater }"
   >
     <component
       :is="isDesktopOrGreater ? 'div' : 'BaseScroll'"
-      class="x-h-full desktop:x-my-16 desktop:x-ml-16"
+      class="x-h-full desktop:x-ml-16"
+      :class="{ 'x-bg-neutral-0': showEmpathize }"
     >
-      <div v-if="showEmpathize || showIdentifierResults" class="x-layout-item desktop:x-block">
+      <div
+        v-if="showEmpathize || showIdentifierResults"
+        class="x-layout-item x-pb-16 desktop:x-block desktop:x-pl-16 desktop:x-pt-16"
+        :class="{ 'x-mb-40 x-border-b x-border-neutral-10': !x.query.search && isTabletOrLess }"
+      >
         <BaseKeyboardNavigation
           class="x-flex x-flex-col desktop:x-grid desktop:x-grid-cols-12 desktop:x-items-start desktop:x-gap-24"
           :navigationHijacker="navigationHijacker"