service item buy

src/components/ServiceItem.tsx

@@ -25,8 +25,8 @@ const ServiceItem: FC<Props> = (props: Props) => {
         <div className={`flex-1 relative flex flex-col self-stretch min-w-[45%] xl:min-w-[30%] bg-white rounded-3xl xl:p-6 p-4 ${props.className} ${props.isDisabled ? 'opacity-50' : ''}`}>
             {
                 props.isQuikAccess &&
-                <div className='absolute left-4 top-4'>
-                    <More onClick={props.onMoreClick} size={14} color='black' className='rotate-90' />
+                <div onClick={props.onMoreClick} className='absolute  size-6 flex justify-center items-center left-4 top-4'>
+                    <More size={14} color='black' className='rotate-90' />
                 </div>
             }
             <div className='flex gap-2 items-center'>
@@ -34,7 +34,7 @@ const ServiceItem: FC<Props> = (props: Props) => {
                     <img src={item.icon} alt={item.name} className='w-full h-full' />
                 </div>
                 <div className='flex flex-col'>
-                    <div className=' text-sm'>
+                    <div className=' text-sm pl-3'>
                         {item.name}
                     </div>
                     {

src/pages/service/components/HeaderBuy.tsx

@@ -45,7 +45,7 @@ const HeaderBuy: FC<Props> = ({ data, planId }) => {
                     </div>
                 </div>
                 <div className='w-full items-end mt-6 flex xl:flex-row flex-col xl:justify-between'>
-                    <div className='flex xl:gap-8 gap-4'>
+                    <div className='flex w-full xl:gap-8 gap-4'>
                         <div className='xl:size-[70px] size-[50px] rounded-xl'>
                             <img src={data?.icon} className='w-full h-full rounded-xl' />
                         </div>