update

src/components/ReactTable4/EditRow.js

@@ -343,83 +343,95 @@ rder p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200
         </p>
       </div>
       {/* bottom */}
-      <div className="flex flex-1 items-center">
-        {/* map */}
-        <div className="">
-          <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
-            لوکیشن مد نظر:
-          </span>
-          <img className="my-2 mr-2 border rounded" src={map} />
-        </div>
-        {/* formInput */}
-        <div className="flex flex-col flex-1">
-          <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
-            توضیحات:
-          </span>
-          <form className="flex flex-col ">
-            <input
-              placeholder="موضوع"
-              className="text-xs placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
-              style={{
-                backgroundColor: "#F8FBFF",
-                borderColor: "#C8DEF9",
-                color: "#00253A",
-              }}
+      <div className="flex flex-row items-center">
+        {/* right */}
+        <div className="flex items-center w-10/12">
+          {/* map */}
+          <div className=" mx-2">
+            <span className="text-xs mr-2" style={{ color: "#65A9FF" }}>
+              لوکیشن مد نظر:
+            </span>
+            <img
+              className="my-2 mr-2 border border-blue-300 rounded"
+              src={map}
             />
-            <textarea
-              placeholder="متن"
-              className="resize-none placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+          </div>
+          {/* formInput */}
+          <div className="flex flex-col flex-1 mx-2">
+            <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
+              توضیحات:
+            </span>
+            <form className="flex flex-col ">
+              <input
+                placeholder="موضوع"
+                className="text-xs mb-2 placeholder-blue-300 rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+                style={{
+                  backgroundColor: "#F8FBFF",
+                  borderColor: "#C8DEF9",
+                  color: "#00253A",
+                }}
+              />
+              <textarea
+                placeholder="متن"
+                className="resize-none w-full h-32 placeholder-blue-300 text-xs rounded-sm border p-2 focus:outline-none focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20"
+                style={{
+                  backgroundColor: "#F8FBFF",
+                  borderColor: "#C8DEF9",
+                  color: "#00253A",
+                }}
+              ></textarea>
+            </form>
+          </div>
+          {/* previous */}
+          <div className="flex flex-col relative mx-2">
+            {/* title */}
+            <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
+              توضیحات قبلی:
+            </span>
+            {/* content */}
+            <div
               style={{
                 backgroundColor: "#F8FBFF",
                 borderColor: "#C8DEF9",
-                color: "#00253A",
               }}
-            ></textarea>
-          </form>
-        </div>
-        {/* previous */}
-        <div className="flex flex-col relative">
-          <span className="text-sm mb-2" style={{ color: "#65A9FF" }}>
-            توضیحات قبلی:
-          </span>
-          <div
-            style={{
-              backgroundColor: "#F8FBFF",
-              borderColor: "#C8DEF9",
-            }}
-            className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
-          >
-            {sentForms.slice(0, 4).map((sentForm, index) => (
-              <div>
-                {/* content */}
-                <div className="p-2">
-                  <p className="text-xs" style={{ color: "#00253A" }}>
-                    {sentForm.title}
-                  </p>
-                  <p
-                    className="text-xs text-left mt-2"
-                    style={{ color: "#6397B5" }}
-                  >
-                    <span>تاریخ:</span>
-                    {"  "}
-                    {sentForm.date}
-                  </p>
+              className="rounded-md border cursor-pointer h-44 no-scrollbar overflow-y-scroll	"
+            >
+              {/* {sentForms.slice(0, 4).map((sentForm, index) => ( */}
+              {sentForms.map((sentForm, index) => (
+                <div>
+                  {/* content */}
+                  <div className="p-2">
+                    <p className="text-xs" style={{ color: "#00253A" }}>
+                      {sentForm.title}
+                    </p>
+                    <p
+                      className="text-xs text-left mt-2"
+                      style={{ color: "#6397B5" }}
+                    >
+                      <span>تاریخ:</span>
+                      {"  "}
+                      {sentForm.date}
+                    </p>
+                  </div>
+                  {/* border */}
+                  {Number(index) !== sentForms.length - 1 && (
+                    <div
+                      className="border"
+                      style={{ borderColor: "#C8DEF9" }}
+                    ></div>
+                  )}
                 </div>
-                {/* border */}
-                {Number(index) !== sentForms.length - 1 && (
-                  <div
-                    className="border"
-                    style={{ borderColor: "#C8DEF9" }}
-                  ></div>
-                )}
-              </div>
-            ))}
+              ))}
+            </div>
+            {/* left border */}
+            <div
+              style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
+              className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
+            ></div>
           </div>
-          <div
-            style={{ bottom: "33%", backgroundColor: "#C8DEF9" }}
-            className="absolute left-0.5 transform -translate-x-1/2 -translate-y-1/2 w-1 h-14 rounded"
-          ></div>
         </div>
+        {/* left */}
+        <div className="w-2/12 flex justify-end">dfsfdsdfs</div>
       </div>
     </section>
   );