textarea height issue

db.json

 {
   "task": [
     {
-      "title": "Travel to head office",
+      "title": "",
       "isCompleted": false,
       "id": 1
     },
     {
-      "title": "Buy food",
-      "isCompleted": true,
+      "title": "",
+      "isCompleted": false,
       "id": 2
     }
   ]

src/app-context/index.js

@@ -18,9 +18,9 @@ export function TodoProvider({ children }) {
     }
   }
   //UPDATE METHOD
-  async function updateTodo({ id, ...item }) {
+  async function updateTodo({ id, title, isCompleted }) {
     try {
-      const response = await api.updateTodo({ id, ...item });
+      const response = await api.updateTodo({ id, title, isCompleted });
       setTodo(response);
     } catch (err) {
       toast.error(err.message);

src/components/base/layout/index.js

 import "./layout.css";
 function Layout({ count, ...props }) {
-  console.log(props);
+  const todoCount = count > 1 ? "Todos" : "Todo";
+
   return (
     <div className="container">
-      <h2>
-        You have {count} {count > 1 ? "Todos" : "Todo"}
-      </h2>
+      <h1>
+        You have {count} {todoCount}
+      </h1>
       {/* inner section that contain (tasklist and forms) */}
       <div {...props}></div>
     </div>

src/components/base/layout/layout.css

 .container {
-  min-height: 40vh;
-
-  height: auto;
+  min-height: 40dvh;
   margin-inline: auto;
 
   background: white;
 
   position: relative;
 }
-.container h2 {
+.container h1 {
   box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
   border: none;
   text-align: center;
   padding: 1.3rem 0px;
   margin: 0;
   position: relative;
+  font-size: 25px;
   z-index: 1;
 }
 h3 {
@@ -24,6 +23,12 @@ h3 {
 }
 @media screen and (min-width: 1024px) {
   .container {
-    width: 40dvw;
+    min-width: 40dvw;
+  }
+}
+
+@media screen and (min-width: 1550px) {
+  .container {
+    min-width: 30dvw;
   }
 }

src/components/top-level/form/index.js

@@ -8,7 +8,7 @@ function Form({ onSubmit }) {
   const handleSubmit = (e) => {
     e.preventDefault();
     onSubmit({ title });
-    //setTitle("");
+    setTitle("");
   };
 
   return (

src/components/top-level/task/index.js

@@ -23,21 +23,35 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
   // (useCallback)---> to avoid calling the checkbox component without any action applied on checkbox
   const handleChange = useCallback(() => {
     setIsCheck(!ischeck);
-    onChange({ id, title, isCompleted: !ischeck });
-    toast.success(
-      `${!ischeck ? "Task completed" : "Task not completed"}`,
-      "success"
-    );
+    onChange({ id, isCompleted: !ischeck });
+    // toast(`${!ischeck ? "Task completed" : "Task not completed"}`, "success");
   }, [ischeck]);
 
   const handleContent = (e) => {
     setDebounceTitle(e.target.value);
-    const textarea = document.querySelector("textarea");
-    //calculate the height of content  based on scrollheight
-    textarea.addEventListener("keyup", (e) => {
-      let scheight = e.target.scrollHeight;
-      textarea.style.height = `${scheight}px`;
+    const textareaRef = textarea_ref.current;
+
+    textareaRef.addEventListener("input", function () {
+      this.style.height = "auto"; // Reset the height to auto to calculate the correct scrollHeight
+      const scrollHeight = this.scrollHeight;
+
+      if (this.scrollTop === 0) {
+        this.style.height = `${scrollHeight}px`;
+      } else {
+        // If there is overflow (a new line is created), increase the height
+        this.style.height = `${scrollHeight + this.scrollTop}px`;
+      }
     });
+
+    // Optional: To ensure the textarea resizes initially if there's content
+    textareaRef.dispatchEvent(new Event("input"));
+
+    //const textarea = document.querySelector("textarea");
+    //calculate the height of content  based on scrollheight
+    // textarea.addEventListener("keyup", (e) => {
+    //   let scheight = e.target.scrollHeight;
+    //   textarea.style.height = `${scheight}px`;
+    // });
   };
 
   //debounce
@@ -45,11 +59,10 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
     //checking the content height and set on page load
     const scrollHeight = textarea_ref.current.scrollHeight;
     textarea_ref.current.style.height = `${scrollHeight}px`;
-
     //after 2 second it will execute
     const handler = setTimeout(() => {
       if (textarea_ref.current.value !== title) {
-        onChange({ id, title: debouncetitle, isCompleted: !ischeck });
+        onChange({ id, title: debouncetitle });
         toast.success("Task updated");
       }
     }, 2000);
@@ -71,7 +84,6 @@ function Task({ id = 1, title, isCompleted, onChange, onDelete }) {
         <textarea
           ref={textarea_ref}
           className={`${ischeck ? "strike-through" : ""}`}
-          contentEditable={true}
           value={debouncetitle}
           onChange={handleContent}
           // disabled={ischeck}

src/components/top-level/task/task.css

 .task-section {
   display: flex;
   align-items: center;
-  padding: 0.3rem 0.8rem;
+  padding: 0.5rem 1rem 0.4rem 1rem;
   justify-content: space-between;
   border-top: 1px solid #ccc;
+
   /* box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset; */
   clip-path: inset(0 -100vmax);
 }
@@ -13,6 +14,7 @@
 .task-section > div {
   display: flex;
   align-items: center;
+  height: auto;
   width: 90%;
 }
 .fa-close {
@@ -34,8 +36,9 @@ input:focus {
   resize: none;
   border: none;
   outline: none;
-  margin: 20px 0px 0px 5px;
-  padding: 0;
+  position: relative;
+  top: 10px;
+  margin-left: 0.4rem;
   font-size: 17px;
   color: #8e8d8d;
   font-family: "Open Sans", sans-serif;