fix: style

bo/src/components/admin/ProductDetailView.vue

@@ -1,10 +1,14 @@
 <template>
   <component :is="Default || 'div'">
-    <p class="cursor-pointer" @click="backFromProduct()">Back to products</p>
-    <div class="container my-10 mx-auto ">
+    <div class="flex items-center gap-2 mb-4">
+      <UIcon name="line-md:arrow-left" class="text-(--accent-blue-light) dark:text-(--accent-blue-dark)" />
+      <p class="cursor-pointer text-(--accent-blue-light) dark:text-(--accent-blue-dark)" @click="backFromProduct()">
+        Back to products</p>
+    </div>
+    <div class="container mx-auto ">
       <div
         class=" gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
-        <div v-if="!isShowProductView" class="flex items-end justify-between">
+        <div v-if="!isShowProductView" class="flex items-center justify-between">
           <div class="flex items-center gap-3" v-if="!isTranslations">
             <p class="text-red-500 text-md whitespace-nowrap">Translate from Polish to</p>
             <USelect v-model="toLangId" :items="availableLangs" value-key="id" label-key="name"
@@ -21,7 +25,7 @@
             </USelect>
           </div>
 
-          <div class="flex gap-3 items-end justify-end">
+          <div class="flex gap-3">
             <UButton @click="() => {
               fetchForLanguage(toLangId)
               isShowProductView = true
@@ -34,7 +38,7 @@
               class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
               Translate
             </UButton>
-            <div v-else class="flex gap-3 items-end justify-end">
+            <div v-else class="flex gap-3">
               <UButton @click="() => {
                 toLangId = settingStore.shopDefaultLanguage
                 isTranslations = false
@@ -50,7 +54,8 @@
         </div>
         <div v-else>
           <UButton @click="isShowProductView = false" color="primary"
-            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
+            class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) gap-2">
+            <UIcon name="line-md:arrow-left" class="" />
             Back
           </UButton>
         </div>
@@ -162,7 +167,6 @@ import Default from '@/layouts/default.vue';
 import { langs } from '@/router/langs';
 import { useProductStore } from '@/stores/product';
 import { useSettingsStore } from '@/stores/settings';
-import { watch } from 'vue';
 import { onMounted, ref } from 'vue';
 import { computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
@@ -226,6 +230,8 @@ const translateToSelectedLanguage = async () => {
 const fetchForLanguage = async (langId: number | null) => {
   if (productID.value) {
     await productStore.getProductDescription(langId, productID.value)
+    removeInlineStylesFromAll(productStore.productDescription)
+    removePStyles(productStore.productDescription)
   }
 }
 
@@ -237,6 +243,7 @@ onMounted(async () => {
   }
 })
 
+
 // text edit
 const enableEdit = () => {
   if (usageRef.value) {
@@ -290,4 +297,48 @@ const cancelDescriptionEdit = () => {
   }
   descriptionEdit.disableEdit()
 }
+
+function removeInlineStylesFromAll(product) {
+  if (!product) return
+  const removeStyles = (html: string) => {
+    if (!html) return ''
+    const div = document.createElement('div')
+    div.innerHTML = html
+
+    div.querySelectorAll('*').forEach(el => {
+      const bg = el.style.background || el.style.backgroundColor
+      if (bg) {
+        el.style.background = ''
+        el.style.backgroundColor = ''
+      }
+    })
+    div.querySelectorAll('p').forEach(p => {
+      if (p.querySelector('img')) {
+        p.style.display = 'flex'
+        p.style.gap = '20px'
+        p.style.padding = '30px 0'
+      }
+    })
+    div.querySelectorAll('table').forEach(table => {
+      table.querySelectorAll('tbody').forEach(tbody => {
+         tbody.style.setProperty('background-color', 'white', 'important')
+        tbody.querySelectorAll('tr').forEach(tr => {
+          tr.querySelectorAll('td').forEach(td => {
+            td.style.setProperty('padding', '10px', 'important')
+            td.querySelectorAll('p').forEach(p => {
+              p.style.setProperty('display', 'flex', 'important')
+              p.style.setProperty('padding', '0px', 'important')
+              p.style.setProperty('align-items', 'start', 'important')
+            })
+          })
+        })
+      })
+    })
+    return div.innerHTML
+  }
+  product.description = removeStyles(product.description)
+  product.description_short = removeStyles(product.description_short)
+  product.usage = removeStyles(product.usage)
+}
+
 </script>