feature: Fix RPs layout for mobile devices

src/components/main.vue

@@ -4,10 +4,10 @@
     <LocationProvider location="results">
       <Results />
     </LocationProvider>
-    <LocationProvider v-if="showRelatedPrompts" location="related_prompts">
+    <LocationProvider v-if="showRelatedPrompts" :location="semanticsLocation">
       <CustomRelatedPrompts
         :related-prompt-list="relatedPrompts"
-        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-24 desktop:x-mt-32'"
+        :class="x.noResults ? 'desktop:x-mt-24' : 'x-mt-48 desktop:x-mt-32'"
       />
     </LocationProvider>
     <LocationProvider v-if="!showRelatedPrompts" :location="semanticsLocation">

src/components/related-prompts/custom-related-prompts.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="x-mb-32 x-flex x-flex-col">
+  <div class="x-mb-64 x-flex x-flex-col">
     <i18n-t
-      class="x-no-results-message x-text1 x-flex x-flex-wrap x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
+      class="x-no-results-message x-text1 x-flex x-flex-wrap x-gap-4 x-items-center x-justify-center x-break-words x-bg-neutral-10 x-p-24 x-text-center x-text-neutral-90 desktop:x-text1-lg"
       keypath="relatedPrompts.title"
-      tag="span"
+      tag="p"
       scope="global"
     >
       <template #query>
-        <span class="x-title3 x-w-auto">{{ x.query.search }}</span>
+        <span class="x-title3 x-w-auto">"{{ x.query.search }}"</span>
+      </template>
+      <template #message>
+        <span class="x-w-auto">{{ $t('relatedPrompts.message') }}</span>
       </template>
     </i18n-t>
 

src/components/related-prompts/related-prompts-tag-list.vue

@@ -7,7 +7,7 @@
   >
     <div
       ref="slidingPanelContent"
-      class="x-flex x-gap-8 x-font-main desktop:x-mx-0 desktop:x-mb-0"
+      class="x-flex x-gap-16 x-font-main desktop:x-mx-0 desktop:x-mb-0"
       :class="{ 'x-w-[calc(100%)]': selectedIndex !== -1 }"
     >
       <div
@@ -20,14 +20,14 @@
           { 'x-hidden': shouldHideButton(index) },
           isSelected(index)
             ? 'x-w-full x-rounded-b-none'
-            : 'x-h-[112px] x-w-[204px] desktop:x-w-[303px]',
+            : 'x-min-h-[112px] x-h-full x-w-[204px] desktop:x-w-[303px]',
         ]"
         data-test="related-prompt-item"
       >
         <!-- Suggestion -->
         <button
-          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-px-16 x-pt-8 x-text-start x-transition-all x-duration-500"
-          :class="isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]'"
+          class="x-flex x-flex-row x-items-start x-justify-between x-gap-12 x-p-16 x-text-start x-transition-all x-duration-500"
+          :class="[isSelected(index) ? 'x-w-full' : 'x-w-[204px] x-grow desktop:x-w-[303px]']"
           @click="toggleSuggestion(index)"
         >
           <div class="x-flex x-min-h-[32px]">
@@ -42,10 +42,8 @@
               {{ suggestion.suggestionText }}
             </span>
           </div>
-          <div :class="{ 'x-mr-8 x-mt-8': !isSelected(index) }">
             <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
             <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
-          </div>
         </button>
       </div>
     </div>

src/i18n/messages.types.ts

@@ -130,5 +130,6 @@ export interface Messages {
   }
   relatedPrompts: {
     title: string
+    message: string
   }
 }

src/i18n/messages/de.messages.json

@@ -128,7 +128,8 @@
       "reject": "Nein, ich bleibe hier"
     },
     "relatedPrompts": {
-      "title": "Sind Sie an „{query}“ interessiert? Entdecken Sie diese Vorschläge:"
+      "title": "Sind Sie an {query} interessiert?",
+      "message": "Entdecken Sie diese Vorschläge:"
     }
   },
   "mobile": {

src/i18n/messages/en.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, I'll stay here"
     },
     "relatedPrompts": {
-      "title": "Are you interested in \"{query}\"? Explore this suggestions:"
+      "title": "Are you interested in {query}?",
+      "message": "Explore this suggestions:"
     }
   },
   "mobile": {

src/i18n/messages/es.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, me quedaré aquí"
     },
     "relatedPrompts": {
-      "title": "¿Estás interesado en \"{query}\"? Explora estas sugerencias:"
+      "title": "¿Estás interesado en {query}?",
+      "message": "Explora estas sugerencias:"
     }
   },
   "mobile": {

src/i18n/messages/fr.messages.json

@@ -128,7 +128,8 @@
       "reject": "Non, je reste ici"
     },
     "relatedPrompts": {
-      "title": "Êtes-vous intéressé par «{query}»? Explorez ces suggestions:"
+      "title": "Êtes-vous intéressé par {query}?",
+      "message": "Explorez ces suggestions:"
     }
   },
   "mobile": {

src/i18n/messages/it.messages.json

@@ -128,7 +128,8 @@
       "reject": "No, rimango qui"
     },
     "relatedPrompts": {
-      "title": "Ti interessa \"{query}\"? Esplora questi suggerimenti:"
+      "title": "Ti interessa {query}?",
+      "message": "Esplora questi suggerimenti:"
     }
   },
   "mobile": {

src/i18n/messages/pt.messages.json

@@ -128,7 +128,8 @@
       "reject": "Não, vou ficar aqui"
     },
     "relatedPrompts": {
-      "title": "Você está interessado em \"{query}\"? Explore estas sugestões:"
+      "title": "Você está interessado em {query}?",
+      "message": "Explore estas sugestões:"
     }
   },
   "mobile": {