better handling of textbox focus for mobile

frontend/src/components/AddBulkSteps.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 
 interface Step {
   step_number: number;
@@ -11,12 +11,12 @@ interface AddBulkStepsProps {
 }
 
 const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
-  const [textValue, setTextValue] = useState<string>('');
+  const [textValue, setTextValue] = useState<string>("");
 
   useEffect(() => {
-    const textRepresentation = steps.map(step =>
-      `${step.instruction}`
-    ).join('\n');
+    const textRepresentation = steps
+      .map((step) => `${step.instruction}`)
+      .join("\n");
     setTextValue(textRepresentation);
   }, [steps]);
 
@@ -24,36 +24,59 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
     setTextValue(e.target.value);
   };
 
-
   const parseAndUpdate = (value: string) => {
-    const lines = value.split('\n').filter(line => line.trim() !== '');
+    const lines = value.split("\n").filter((line) => line.trim() !== "");
 
     const parsedSteps: Step[] = lines.map((line, idx) => {
-      return { step_number: idx + 1, instruction: line }
-    })
+      return { step_number: idx + 1, instruction: line };
+    });
 
     if (onChange) onChange(parsedSteps);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       parseAndUpdate(textValue);
     }
   };
 
   const handleBlur = () => {
     parseAndUpdate(textValue);
+    document.body.style.overflow = "";
+  };
+
+  const manageOverflow = () => {
+    const lineCount = textValue
+      .split("\n")
+      .filter((line) => line.trim() !== "").length;
+    if (lineCount > 8) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+  };
+
+  const handleFocus = () => {
+    manageOverflow();
+  };
+
+  const handleTouchEnd = () => {
+    manageOverflow();
   };
 
   return (
     <div>
-      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">Steps:</h3>
+      <h3 className="text-xl font-bold text-[var(--color-secondaryTextDark)]">
+        Steps:
+      </h3>
       <textarea
         rows={8}
         value={textValue}
         onChange={handleInputChange}
         onKeyDown={handleKeyDown}
         onBlur={handleBlur}
+        onFocus={handleFocus}
+        onTouchEnd={handleTouchEnd}
         placeholder="Enter steps separated by new line"
         className="mb-4 p-2 border border-[var(--color-primaryBorder)] rounded w-full"
       />