fix: text box widgets design to enter value issue in mobile view

Author: raktima-opensignlabs

apps/OpenSign/src/components/pdf/BorderResize.js

@@ -1,11 +1,24 @@
 import React from "react";
 
-function BorderResize({ right, top }) {
+function BorderResize(props) {
+  const getHeight = () => {
+    const height = props.posHeight(props.pos, props.isSignYourself);
+    if (height > 14) {
+      return "14px";
+    } else {
+      return `${height}px`;
+    }
+  };
+
   return (
     <div
-      className={`${right ? `-right-[12px]` : "-right-[1px]"} ${
-        top ? `-bottom-[11px]` : "-bottom-[1px]"
-      } absolute inline-block w-[14px] h-[14px] hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
+      style={{
+        width: getHeight() || "14px",
+        height: getHeight() || "14px"
+      }}
+      className={`${props.right ? `-right-[12px]` : "-right-[2px]"} ${
+        props.top ? `-bottom-[12px]` : "-bottom-[2px] "
+      } absolute inline-block hover:cursor-sw-resize border-r-[3px] border-b-[3px] border-[#188ae2]`}
     ></div>
   );
 }

apps/OpenSign/src/components/pdf/Placeholder.js

@@ -791,12 +791,22 @@ function Placeholder(props) {
         props.pos.type !== radioButtonWidget &&
         props.pos.type !== "checkbox" &&
         props.pos.key === props.selectWidgetId ? (
-          <BorderResize right={-12} top={-11} />
+          <BorderResize
+            right={-12}
+            top={-11}
+            pos={props.pos}
+            posHeight={props.posHeight}
+            isSignYourself={props.isSignYourself}
+          />
         ) : props.data && props.isNeedSign && props.pos.type !== "checkbox" ? (
           props.data?.signerObjId === props.signerObjId &&
           props.pos.type !== radioButtonWidget &&
           props.pos.type !== "checkbox" ? (
-            <BorderResize />
+            <BorderResize
+              posHeight={props.posHeight}
+              isSignYourself={props.isSignYourself}
+              pos={props.pos}
+            />
           ) : (
             <></>
           )
@@ -862,6 +872,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
+              posHeight={props.posHeight}
             />
           </div>
         ) : (
@@ -889,6 +900,7 @@ function Placeholder(props) {
               startDate={startDate}
               handleSaveDate={handleSaveDate}
               xPos={props.xPos}
+              posHeight={props.posHeight}
             />
           </>
         )}

apps/OpenSign/src/components/pdf/PlaceholderType.js

@@ -29,7 +29,9 @@ function PlaceholderType(props) {
   const [textValue, setTextValue] = useState();
   const [selectedCheckbox, setSelectedCheckbox] = useState([]);
   const years = range(1990, getYear(new Date()) + 16, 1);
-  const fontSize = (props.pos.options?.fontSize || "12") + "px";
+  const height = props.posHeight(props.pos, props.isSignYourself);
+  const fontSize =
+    (props.pos.options?.fontSize || (height > 14 ? 12 : height / 2)) + "px";
   const fontColor = props.pos.options?.fontColor || "black";
   const months = [
     "January",

apps/OpenSign/src/constant/Utils.js

@@ -1283,8 +1283,14 @@ export const changeImageWH = async (base64Image) => {
 };
 
 //function to calculate font size of text area widgets
-const calculateFontSize = (position, containerScale, signyourself) => {
-  const font = position?.options?.fontSize || 12;
+const calculateFontSize = (
+  position,
+  containerScale,
+  signyourself,
+  widgetHeight
+) => {
+  const font =
+    position?.options?.fontSize || widgetHeight > 14 ? 12 : widgetHeight / 2;
   if (!signyourself && position?.isMobile && position?.scale) {
     return font / position?.scale / containerScale;
   } else {
@@ -1480,7 +1486,8 @@ export const multiSignEmbed = async (
         const fontSize = calculateFontSize(
           position,
           containerScale,
-          signyourself
+          signyourself,
+          widgetHeight
         );
         parseInt(fontSize);
         let textContent;
@@ -1655,7 +1662,7 @@ export const multiSignEmbed = async (
     });
   }
   const pdfBytes = await pdfDoc.saveAsBase64({ useObjectStreams: false });
-  //console.log("pdf", pdfBytes);
+  // console.log("pdf", pdfBytes);
   return pdfBytes;
 };