Update collapse style

frontend/components/product/ProductHero/ProductDescription.vue

@@ -15,6 +15,8 @@ const descriptionEl = ref<HTMLDivElement | null>(null);
 const descriptionElScrollHeight = ref(0);
 const isDescriptionCollapsed = ref(true);
 
+const descriptionMaxHeight = 200;
+
 // watch
 
 watch(
@@ -30,29 +32,36 @@ watch(
 
 <template>
     <div
-        :class="descriptionElScrollHeight > 500 ? 'mb-20' : ''"
+        :class="descriptionElScrollHeight > descriptionMaxHeight ? 'mb-20' : ''"
         class="relative"
     >
         <div
             ref="descriptionEl"
-            :class="descriptionElScrollHeight > 500 && isDescriptionCollapsed ? 'mask-b-from-0% max-h-[300px]' : ''"
+            :class="
+                descriptionElScrollHeight > descriptionMaxHeight && isDescriptionCollapsed
+                    ? 'mask-b-from-20% mask-b-to-90% overflow-y-hidden max-h-[300px] select-none'
+                    : ''
+            "
             class="py-8 leading-[200%] max -sm:text-sm text-slate-500 text-justify [&_a]:text-blue-400 [&_strong]:font-bold [&_u]:text-red-400"
             v-html="description"
         />
         <div
-            v-if="descriptionElScrollHeight > 500"
+            v-if="descriptionElScrollHeight > descriptionMaxHeight"
             :class="isDescriptionCollapsed ? 'absolute' : ''"
-            class="bottom-0 inset-x-0 flex items-center justify-center"
+            class="bottom-0 inset-x-0 flex items-center"
         >
-            <Button
+            <button
                 @click="isDescriptionCollapsed = !isDescriptionCollapsed"
-                variant="primary"
+                variant="ghost"
                 size="md"
-                class="rounded-full max-xs:typo-label-sm !px-4 xs:!px-8"
+                class="rounded-full max-xs:typo-label-sm flex items-center justify-center gap-1.5"
             >
-                مشاهده
-                {{ isDescriptionCollapsed ? "بیشتر" : "کمتر" }}
-            </Button>
+                {{ isDescriptionCollapsed ? 'نمایش بیشتر' : 'نمایش کمتر' }}
+                <Icon
+                    name="ci:chevron-left"
+                    size="16"
+                />
+            </button>
         </div>
     </div>
 </template>