From b116aa1d83973fe00cde3b3a1b18ddbc2de28edb Mon Sep 17 00:00:00 2001
From: lauramargar <114984466+lauramargar@users.noreply.github.com>
Date: Thu, 2 Nov 2023 11:21:03 +0100
Subject: [PATCH] fix: rendering problem in query preview sliding panel (#352)

---
 src/components/pre-search/custom-query-preview.vue | 2 +-
 src/tailwind/plugin-options.js                     | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/pre-search/custom-query-preview.vue b/src/components/pre-search/custom-query-preview.vue
index db03ff86..edbb04bc 100644
--- a/src/components/pre-search/custom-query-preview.vue
+++ b/src/components/pre-search/custom-query-preview.vue
@@ -21,7 +21,7 @@
           </QueryPreviewButton>
         </template>
         <DisplayClickProvider resultFeature="brand_recommendations">
-          <div class="x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
+          <div class="x-transform-style-3d x-flex x-gap-16 x-pt-16 max-desktop:x-px-16">
             <Result
               v-for="result in results"
               :key="result.id"
diff --git a/src/tailwind/plugin-options.js b/src/tailwind/plugin-options.js
index 416e55fb..6455c576 100644
--- a/src/tailwind/plugin-options.js
+++ b/src/tailwind/plugin-options.js
@@ -17,6 +17,9 @@ module.exports = {
         paddingTop: theme('spacing.24'),
         paddingBottom: theme('spacing.24')
       }
+    },
+    '.transform-style-3d': {
+      transformStyle: 'preserve-3d'
     }
   })
 };