update

src/components/ReactTable4/Buttons.js

@@ -12,19 +12,19 @@ export function Buttons({ row }) {
       {...row.getToggleRowExpandedProps()}
     >
       <button
-        className="flex flex-row items-center justify-around  p-2 rounded border border-gray-300 "
+        className="mx-1 flex flex-row items-center justify-around  p-2 rounded border border-gray-300 "
         onClick={() => setActiveDetails(!activeDetails)}
       >
         جزیات
         <img
           src={arrowIcon}
           alt=""
-          className={`w-3 cursor-pointer mr-2 ${
+          className={`mx-1 w-3 cursor-pointer mr-2 ${
             activeDetails ? "rotate-60" : "rotate-90"
           }`}
         />
       </button>
-      <div className="p-2 rounded border border-gray-300 cursor-pointer ">
+      <div className="mx-1 p-2 rounded border border-gray-300 cursor-pointer ">
         <img src={edit} alt="" className="w-4" />
       </div>
       <img src={more} alt="" className="w-5 cursor-pointer " />

src/components/ReactTable4/EditButtons.js

@@ -12,7 +12,7 @@ export function EditButtons({}) {
     <div className="flex flex-row items-center justify-end">
       {/* add new row */}
       <button
-        className=" flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
+        className="mx-1  flex flex-row items-center p-2 text-xs text-white rounded border-b-2 border-blue-600"
         style={{ backgroundColor: "#65A9FF" }}
       >
         ثبت جدید
@@ -22,7 +22,7 @@ export function EditButtons({}) {
       <img
         src={filter}
         alt=""
-        className={`p-2 rounded border border-blue-300 cursor-pointer  w-8 ${
+        className={`mx-1 p-2 rounded border border-blue-300 cursor-pointer  w-8 ${
           activeFilter ? "border" : "border-0"
         }`}
         onClick={() => setActiveFilter(!activeFilter)}