menu item

src/components/listview/MenuItem.tsx

@@ -100,6 +100,8 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
   };
 
   const productDetailUrl = `/${name}/${product.id}?category=${product.category.id}`;
+  const actionButtonClass = "bg-background active:drop-shadow-xs rounded-md h-8 inline-flex p-1 justify-center items-center gap-2 relative overflow-hidden";
+  const actionButtonLabelClass = "text-sm2 pt-0.5 font-normal text-foreground";
 
   if (viewMode === "grid") {
     return (
@@ -123,8 +125,8 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
             )}
           </div>
           {showDetailsInsteadOfAdd ? (
-            <Link href={productDetailUrl} className="bg-background active:drop-shadow-xs w-full rounded-md h-8 inline-flex justify-center items-center gap-2 px-2 text-sm2 font-normal text-foreground">
-              جزئیات
+            <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
+              <span className={actionButtonLabelClass}>جزئیات</span>
             </Link>
           ) : (
             <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} fullWidth />
@@ -164,10 +166,12 @@ const MenuItem = ({ product, variantId: variantIdProp, variantValue: variantValu
       </div>
       <div className="flex flex-col justify-end shrink-0">
         {showDetailsInsteadOfAdd ? (
-          <Link href={productDetailUrl} className="bg-background active:drop-shadow-xs rounded-full h-8 inline-flex items-center gap-1.5 px-3 text-sm2 font-normal text-foreground whitespace-nowrap">
-            جزئیات
+          <div className="w-[115px]">
+            <Link href={productDetailUrl} className={`${actionButtonClass} w-full`}>
+              <span className={actionButtonLabelClass}>جزئیات</span>
               <ArrowLeft size={16} className="stroke-foreground" />
             </Link>
+          </div>
         ) : (
           <div className="w-[115px]">
             <CartQuantityControl quantity={quantity} onAdd={handleAddToCart} onRemove={handleRemoveFromCart} isMutating={isCartMutating} />