From 0c430510bd3420b499aafad45ffda81fa174d9a1 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Wed, 7 Feb 2024 10:43:01 +0100
Subject: [PATCH 1/3] style: Rm x-layout-stack class when no query, add spacing
 to keep consistency with query previews

EMP-3460
---
 src/components/mobile/mobile.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index 0c6af76b..0c855d90 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -11,9 +11,9 @@
       </div>
     </div>
 
-    <div class="x-layout-stack x-layout-expand">
+    <div class="x-layout-expand" :class="{ 'x-layout-stack': $x.query.search }">
       <LocationProvider location="predictive_layer" class="x-z-10">
-        <PredictiveLayer />
+        <PredictiveLayer :class="{ 'x-mb-56': !$x.query.search }" />
       </LocationProvider>
 
       <!-- Results -->

From e66e88f0c0b62807c77882b9e05f7f6115c7dfd0 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Wed, 7 Feb 2024 10:43:34 +0100
Subject: [PATCH 2/3] style: Add margin top in popular searches for mobile

EMP-3460
---
 .../predictive-layer/predictive-popular-searches.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/predictive-layer/predictive-popular-searches.vue b/src/components/predictive-layer/predictive-popular-searches.vue
index 0d9dae0a..c7d834d8 100644
--- a/src/components/predictive-layer/predictive-popular-searches.vue
+++ b/src/components/predictive-layer/predictive-popular-searches.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="x-flex x-flex-col x-gap-4">
+  <div class="x-mt-8 x-flex x-flex-col x-gap-4 desktop:x-mt-0">
     <h1 class="x-title4 x-title4-sm x-uppercase">
       {{ $t('popularSearches.title') }}
     </h1>
@@ -10,7 +10,7 @@
     >
       <template #suggestion="{ suggestion }">
         <PopularSearch
-          class="x-suggestion-lg x-suggestion desktop:x-suggestion-md"
+          class="x-suggestion x-suggestion-lg desktop:x-suggestion-md"
           :suggestion="suggestion"
         >
           <TrendingIcon class="x-icon-lg desktop:x-icon-md" />

From 96794a736085fdb3483ccdb829854a2e6b9ac3fb Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 8 Feb 2024 09:21:52 +0100
Subject: [PATCH 3/3] style: Add border bottom to identify the end of empathize

EMP-3460
---
 src/components/mobile/mobile.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/mobile/mobile.vue b/src/components/mobile/mobile.vue
index 0c855d90..c3c55e68 100644
--- a/src/components/mobile/mobile.vue
+++ b/src/components/mobile/mobile.vue
@@ -13,7 +13,9 @@
 
     <div class="x-layout-expand" :class="{ 'x-layout-stack': $x.query.search }">
       <LocationProvider location="predictive_layer" class="x-z-10">
-        <PredictiveLayer :class="{ 'x-mb-56': !$x.query.search }" />
+        <PredictiveLayer
+          :class="{ 'x-mb-40 x-border-b x-border-neutral-10 x-pb-16': !$x.query.search }"
+        />
       </LocationProvider>
 
       <!-- Results -->