Fix product variants position

frontend/components/product/ProductHero/index.vue

@@ -77,14 +77,32 @@ watch(
 </script>
 
 <template>
-    <div class="flex max-lg:flex-col gap-12 xl:gap-16 container pt-[5rem] pb-28">
+    <div class="flex max-lg:flex-col lg:gap-12 xl:gap-16 container pt-[5rem] pb-28">
         <div class="flex flex-col gap-3 lg:hidden">
-            <NuxtLink
+            <div class="flex items-center justify-between w-full">
-                to="#"
+                <NuxtLink
-                class="typo-label-sm"
+                    to="#"
-            >
+                    class="typo-label-sm"
-                {{ product!.category.name }}
+                >
-            </NuxtLink>
+                    {{ product!.category.name }}
+                </NuxtLink>
+                <button
+                    @click="saveProductHandler"
+                    :disabled="isSaveProductPending || isFetchingPending || !token"
+                    class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
+                >
+                    <Icon
+                        v-if="isSaveProductPending || isFetchingPending"
+                        name="svg-spinners:180-ring-with-bg"
+                    />
+
+                    <Icon
+                        v-else
+                        :class="product?.added_to_favorites ? '**:fill-blue-400' : ''"
+                        :name="product?.added_to_favorites ? 'bi-bookmark-fill' : 'bi:bookmark'"
+                    />
+                </button>
+            </div>
             <h1 class="typo-h-6 xs:typo-h-5 sm:typo-h-4 lg:typo-h-2">
                 {{ product!.name }}
             </h1>
@@ -122,17 +140,17 @@ watch(
             v-model:selectedSlide="selectedSlide"
             :slides="selectedVariant!.images"
         />
-        <div class="lg:w-1/2 flex flex-col gap-3 lg:mt-12">
+        <div class="lg:w-1/2 flex flex-col gap-3 mt-12">
-            <div class="flex items-center justify-between w-full">
+            <div class="flex items-center justify-between w-full max-lg:hidden">
                 <NuxtLink
                     to="#"
-                    class="typo-label-sm max-lg:hidden"
+                    class="typo-label-sm"
-                >   
+                >
                     {{ product!.category.name }}
                 </NuxtLink>
                 <button
                     @click="saveProductHandler"
-                    :disabled="isSaveProductPending || isFetchingPending"
+                    :disabled="isSaveProductPending || isFetchingPending || !token"
                     class="size-10 bg-slate-50 border-slate-200 border rounded-lg flex-center"
                 >
                     <Icon
@@ -189,7 +207,10 @@ watch(
                 />
             </div>
 
-            <ProductDescription :description="product!.description" />
+            <ProductDescription
+                class="max-lg:hidden"
+                :description="product!.description"
+            />
 
             <div class="flex items-center gap-4">
                 <span class="typo-md sm:typo-p-lg"> تنوع رنگی : </span>
@@ -305,6 +326,11 @@ watch(
 
                 <Share />
             </div>
+
+            <ProductDescription
+                class="lg:hidden"
+                :description="product!.description"
+            />
         </div>
     </div>
 </template>