feat: PR changes

RST-2559
empathyco · Dec 11, 2024 · 0e18a0c · 0e18a0c
1 parent abbe454
commit 0e18a0c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/components/related-prompts/custom-related-prompts.vue b/src/components/related-prompts/custom-related-prompts.vue
@@ -15,7 +15,7 @@
     </i18n-t>
 
     <div class="x-flex x-flex-col">
-      <RelatedPromptsTagList class="x-mt-24" />
+      <RelatedPromptsTagList :class="isDesktopOrGreater ? 'x-mt-24' : 'x-mt-16'" />
       <CustomQueryPreview
         v-if="selectedPrompt !== -1"
         :key="queriesPreviewInfo.length"
@@ -31,6 +31,7 @@ import type { PropType } from 'vue'
 import { use$x, useState } from '@empathyco/x-components'
 import { relatedPromptsXModule } from '@empathyco/x-components/related-prompts'
 import { computed, defineComponent } from 'vue'
+import { useDevice } from '../../composables/use-device.composable'
 import CustomQueryPreview from '../search/results/custom-query-preview.vue'
 import RelatedPromptsTagList from './related-prompts-tag-list.vue'
 
@@ -50,6 +51,7 @@ export default defineComponent({
   },
   setup() {
     const x = use$x()
+    const { isDesktopOrGreater } = useDevice()
     const { relatedPrompts, selectedPrompt, selectedQuery } = useState('relatedPrompts', [
       'relatedPrompts',
       'selectedPrompt',
@@ -66,6 +68,7 @@ export default defineComponent({
     })
 
     return {
+      isDesktopOrGreater,
       queriesPreviewInfo,
       selectedPrompt,
       x,

diff --git a/src/components/related-prompts/related-prompts-tag-list.vue b/src/components/related-prompts/related-prompts-tag-list.vue
@@ -7,7 +7,7 @@
   >
     <div
       ref="slidingPanelContent"
-      class="x-flex x-gap-16 x-font-main desktop:x-mx-0 desktop:x-mb-0"
+      class="x-flex x-gap-8 x-font-main desktop:x-mx-0 desktop:x-mb-0"
       :class="{ 'x-w-[calc(100%)]': selectedIndex !== -1 }"
     >
       <div
@@ -42,8 +42,8 @@
               {{ suggestion.suggestionText }}
             </span>
           </div>
-            <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
-            <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
+          <CrossTinyIcon v-if="isSelected(index)" class="x-icon-lg" />
+          <PlusIcon v-else class="x-icon-neutral-80 x-icon-lg" />
         </button>
       </div>
     </div>