From f4358c5004e69bf26f87dbf2752424fce7d2db75 Mon Sep 17 00:00:00 2001
From: RaktimaNXG <raktima.c@nxglabs.com>
Date: Wed, 19 Jun 2024 10:00:43 +0530
Subject: [PATCH] fix: ui design issue in mobile view

---
 apps/OpenSign/src/components/pdf/RenderPdf.js |   1 -
 apps/OpenSign/src/constant/Utils.js           |   2 +-
 apps/OpenSign/src/pages/PdfRequestFiles.js    |  14 +-
 apps/OpenSign/src/pages/PlaceHolderSign.js    | 798 +++++++++---------
 apps/OpenSign/src/pages/SignyourselfPdf.js    |  20 +-
 .../OpenSign/src/pages/TemplatePlaceholder.js | 693 +++++++--------
 6 files changed, 760 insertions(+), 768 deletions(-)

diff --git a/apps/OpenSign/src/components/pdf/RenderPdf.js b/apps/OpenSign/src/components/pdf/RenderPdf.js
index 2c44d92a3..11f0a3f2f 100644
--- a/apps/OpenSign/src/components/pdf/RenderPdf.js
+++ b/apps/OpenSign/src/components/pdf/RenderPdf.js
@@ -411,7 +411,6 @@ function RenderPdf({
                   key={index}
                   pageNumber={pageNumber}
                   width={containerWH.width}
-                  height={containerWH.height}
                   renderAnnotationLayer={false}
                   renderTextLayer={false}
                   onGetAnnotationsError={(error) => {
diff --git a/apps/OpenSign/src/constant/Utils.js b/apps/OpenSign/src/constant/Utils.js
index 7340e4174..3b96ac8ca 100644
--- a/apps/OpenSign/src/constant/Utils.js
+++ b/apps/OpenSign/src/constant/Utils.js
@@ -375,7 +375,7 @@ export const addWidgetOptions = (type) => {
 };
 export const getWidgetType = (item, isHeader) => {
   return (
-    <div className="op-btn  w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
+    <div className="op-btn w-fit  md:w-[100%] op-btn-primary op-btn-outline op-btn-sm focus:outline-none outline outline-[1.5px] ml-[6px] md:ml-0 p-0 overflow-hidden">
       <div className="w-full h-full flex md:justify-between items-center">
         <div className="flex justify-start items-center text-[13px] ml-1">
           {!isMobile && <i className="fa-sharp fa-solid fa-grip-vertical"></i>}
diff --git a/apps/OpenSign/src/pages/PdfRequestFiles.js b/apps/OpenSign/src/pages/PdfRequestFiles.js
index 8a3c6bb7b..1982de689 100644
--- a/apps/OpenSign/src/pages/PdfRequestFiles.js
+++ b/apps/OpenSign/src/pages/PdfRequestFiles.js
@@ -1405,9 +1405,7 @@ function PdfRequestFiles() {
                       ? "none"
                       : "auto"
                 }}
-                className="  min-h-screen   
-                relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300
-                "
+                className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300"
               >
                 {!requestSignTour && requestSignTourFunction()}
                 <ModalUi
@@ -1549,7 +1547,7 @@ function PdfRequestFiles() {
                   pageNumber={pageNumber}
                 />
                 {/* pdf render view */}
-                <div className="min-h-screen w-full md:w-[57%] md:flex md:mr-4">
+                <div className=" w-full  md:w-[57%] flex mr-4">
                   <PdfZoom
                     setScale={setScale}
                     scale={scale}
@@ -1558,7 +1556,7 @@ function PdfRequestFiles() {
                     setZoomPercent={setZoomPercent}
                     zoomPercent={zoomPercent}
                   />
-                  <div className="min-h-screen w-full md:w-[97%] ">
+                  <div className=" w-full md:w-[95%] ">
                     {/* this modal is used show this document is already sign */}
                     <ModalUi
                       isOpen={isCompleted.isModal}
@@ -1707,10 +1705,11 @@ function PdfRequestFiles() {
                       setZoomPercent={setZoomPercent}
                       zoomPercent={zoomPercent}
                     />
+
                     <div
                       ref={divRef}
                       data-tut="reactourSecond"
-                      className="h-[95%] 2xl:mt-[6px] mt-[3px]"
+                      className="h-[95%]"
                     >
                       {containerWH && (
                         <RenderPdf
@@ -1754,9 +1753,8 @@ function PdfRequestFiles() {
                   </div>
                 </div>
 
-                {/* <div className="signerComponent"> */}
                 <div
-                  className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar hidden md:inline-block`}
+                  className={`w-full md:w-[23%] bg-[#FFFFFF]  overflow-y-auto hide-scrollbar  hidden md:inline-block`}
                 >
                   <div className={`max-h-screen`}>
                     {signedSigners.length > 0 && (
diff --git a/apps/OpenSign/src/pages/PlaceHolderSign.js b/apps/OpenSign/src/pages/PlaceHolderSign.js
index 0a7493edb..6d849bc34 100644
--- a/apps/OpenSign/src/pages/PlaceHolderSign.js
+++ b/apps/OpenSign/src/pages/PlaceHolderSign.js
@@ -1728,11 +1728,7 @@ function PlaceHolderSign() {
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div
-            className="  min-h-screen 
-          op-card overflow-hidden flex flex-row justify-between bg-base-300 relative
-          "
-          >
+          <div>
             {isUiLoading && (
               <div className="absolute h-[100vh] w-full flex flex-col justify-center items-center z-[999] bg-[#e6f2f2] bg-opacity-80">
                 <Loader />
@@ -1741,451 +1737,455 @@ function PlaceHolderSign() {
                 </span>
               </div>
             )}
-            {/* this component used for UI interaction and show their functionality */}
-            {!checkTourStatus && (
-              //this tour component used in your html component where you want to put
-              //onRequestClose function to close tour
-              //steps is defined what will be your messages and style also
-              //isOpen is takes boolean value to open
+            <div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
+              {/* this component used for UI interaction and show their functionality */}
+              {!checkTourStatus && (
+                //this tour component used in your html component where you want to put
+                //onRequestClose function to close tour
+                //steps is defined what will be your messages and style also
+                //isOpen is takes boolean value to open
+                <Tour
+                  onRequestClose={closeTour}
+                  steps={tourConfig}
+                  isOpen={placeholderTour}
+                  rounded={5}
+                  closeWithMask={false}
+                />
+              )}
               <Tour
-                onRequestClose={closeTour}
-                steps={tourConfig}
-                isOpen={placeholderTour}
+                onRequestClose={() => setSignerExistModal(false)}
+                steps={signerAssignTour}
+                isOpen={signerExistModal}
                 rounded={5}
                 closeWithMask={false}
               />
-            )}
-            <Tour
-              onRequestClose={() => setSignerExistModal(false)}
-              steps={signerAssignTour}
-              isOpen={signerExistModal}
-              rounded={5}
-              closeWithMask={false}
-            />
-            {/* this component used to render all pdf pages in left side */}
-            <RenderAllPdfPage
-              signPdfUrl={pdfDetails[0].URL}
-              allPages={allPages}
-              setAllPages={setAllPages}
-              setPageNumber={setPageNumber}
-              setSignBtnPosition={setSignBtnPosition}
-              pageNumber={pageNumber}
-            />
-            {/* pdf render view */}
-            <div className="min-h-screen w-full md:w-[57%]  flex md:mr-4">
-              <PdfZoom
-                setScale={setScale}
-                scale={scale}
-                pdfOriginalWH={pdfOriginalWH}
-                containerWH={containerWH}
-                setZoomPercent={setZoomPercent}
-                zoomPercent={zoomPercent}
+              {/* this component used to render all pdf pages in left side */}
+              <RenderAllPdfPage
+                signPdfUrl={pdfDetails[0].URL}
+                allPages={allPages}
+                setAllPages={setAllPages}
+                setPageNumber={setPageNumber}
+                setSignBtnPosition={setSignBtnPosition}
+                pageNumber={pageNumber}
               />
-              <div className="min-h-screen w-full md:w-[97%] ">
-                {/* this modal is used show alert set placeholder for all signers before send mail */}
+              {/* pdf render view */}
+              <div className=" w-full  md:w-[57%] flex mr-4">
+                <PdfZoom
+                  setScale={setScale}
+                  scale={scale}
+                  pdfOriginalWH={pdfOriginalWH}
+                  containerWH={containerWH}
+                  setZoomPercent={setZoomPercent}
+                  zoomPercent={zoomPercent}
+                />
+                <div className=" w-full md:w-[95%] ">
+                  {/* this modal is used show alert set placeholder for all signers before send mail */}
 
-                <ModalUi
-                  isOpen={isSendAlert.alert}
-                  title={
-                    isSendAlert.mssg === "sure" ||
-                    isSendAlert.mssg === textWidget
-                      ? "Fields required"
-                      : isSendAlert.mssg === "confirm" && "Send Mail"
-                  }
-                  handleClose={() => setIsSendAlert({})}
-                  showHeaderMessage={isSendAlert.mssg === "confirm"}
-                >
-                  <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
-                    {isSendAlert.mssg === "sure" ? (
-                      <span>
-                        Please ensure there&apos;s at least one signature widget
-                        added for all recipients.
-                      </span>
-                    ) : isSendAlert.mssg === textWidget ? (
-                      <p>Please confirm that you have filled the text field.</p>
-                    ) : (
-                      isSendAlert.mssg === "confirm" && (
-                        <>
+                  <ModalUi
+                    isOpen={isSendAlert.alert}
+                    title={
+                      isSendAlert.mssg === "sure" ||
+                      isSendAlert.mssg === textWidget
+                        ? "Fields required"
+                        : isSendAlert.mssg === "confirm" && "Send Mail"
+                    }
+                    handleClose={() => setIsSendAlert({})}
+                    showHeaderMessage={isSendAlert.mssg === "confirm"}
+                  >
+                    <div className="max-h-96 overflow-y-scroll scroll-hide p-[20px] text-base-content">
+                      {isSendAlert.mssg === "sure" ? (
+                        <span>
+                          Please ensure there&apos;s at least one signature
+                          widget added for all recipients.
+                        </span>
+                      ) : isSendAlert.mssg === textWidget ? (
+                        <p>
+                          Please confirm that you have filled the text field.
+                        </p>
+                      ) : (
+                        isSendAlert.mssg === "confirm" && (
                           <>
-                            {!isCustomize && (
-                              <span>
-                                Are you sure you want to send out this document
-                                for signatures?
-                              </span>
-                            )}
-                            {isCustomize &&
-                              (!isEnableSubscription || isSubscribe) && (
-                                <>
-                                  <EmailBody
-                                    editorRef={editorRef}
-                                    requestBody={requestBody}
-                                    requestSubject={requestSubject}
-                                    handleOnchangeRequest={
-                                      handleOnchangeRequest
-                                    }
-                                    setRequestSubject={setRequestSubject}
-                                  />
-                                  <div
-                                    className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
-                                    onClick={() => {
-                                      setRequestBody(defaultBody);
-                                      setRequestSubject(defaultSubject);
-                                    }}
-                                  >
-                                    <span>Reset to default</span>
-                                  </div>
-                                </>
+                            <>
+                              {!isCustomize && (
+                                <span>
+                                  Are you sure you want to send out this
+                                  document for signatures?
+                                </span>
                               )}
-                            <div
-                              className={
-                                "flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
-                              }
-                            >
-                              <div className="flex flex-row gap-2">
-                                <button
-                                  onClick={() => sendEmailToSigners()}
-                                  className="op-btn op-btn-primary font-[500] text-sm shadow"
-                                >
-                                  Send
-                                </button>
-                                {isCustomize && (
+                              {isCustomize &&
+                                (!isEnableSubscription || isSubscribe) && (
+                                  <>
+                                    <EmailBody
+                                      editorRef={editorRef}
+                                      requestBody={requestBody}
+                                      requestSubject={requestSubject}
+                                      handleOnchangeRequest={
+                                        handleOnchangeRequest
+                                      }
+                                      setRequestSubject={setRequestSubject}
+                                    />
+                                    <div
+                                      className="flex justify-end items-center gap-1 mt-2 op-link op-link-primary"
+                                      onClick={() => {
+                                        setRequestBody(defaultBody);
+                                        setRequestSubject(defaultSubject);
+                                      }}
+                                    >
+                                      <span>Reset to default</span>
+                                    </div>
+                                  </>
+                                )}
+                              <div
+                                className={
+                                  "flex flex-row md:items-center gap-2 md:gap-6 mt-2 "
+                                }
+                              >
+                                <div className="flex flex-row gap-2">
                                   <button
-                                    onClick={() => {
-                                      setIsCustomize(false);
-                                    }}
-                                    className="op-btn op-btn-ghost font-[500] text-sm"
+                                    onClick={() => sendEmailToSigners()}
+                                    className="op-btn op-btn-primary font-[500] text-sm shadow"
                                   >
-                                    Close
+                                    Send
                                   </button>
+                                  {isCustomize && (
+                                    <button
+                                      onClick={() => {
+                                        setIsCustomize(false);
+                                      }}
+                                      className="op-btn op-btn-ghost font-[500] text-sm"
+                                    >
+                                      Close
+                                    </button>
+                                  )}
+                                </div>
+
+                                {!isCustomize &&
+                                  (isSubscribe || !isEnableSubscription) && (
+                                    <span
+                                      className="op-link op-link-accent text-sm"
+                                      onClick={() => {
+                                        setIsCustomize(!isCustomize);
+                                      }}
+                                    >
+                                      Cutomize Email
+                                    </span>
+                                  )}
+
+                                {!isSubscribe && isEnableSubscription && (
+                                  <div className="mt-2">
+                                    <Upgrade
+                                      message="Upgrade to customize Email"
+                                      newWindow={true}
+                                    />
+                                  </div>
                                 )}
                               </div>
-
-                              {!isCustomize &&
-                                (isSubscribe || !isEnableSubscription) && (
-                                  <span
-                                    className="op-link op-link-accent text-sm"
-                                    onClick={() => {
-                                      setIsCustomize(!isCustomize);
-                                    }}
-                                  >
-                                    Cutomize Email
-                                  </span>
-                                )}
-
-                              {!isSubscribe && isEnableSubscription && (
-                                <div className="mt-2">
-                                  <Upgrade
-                                    message="Upgrade to customize Email"
-                                    newWindow={true}
-                                  />
-                                </div>
-                              )}
-                            </div>
+                            </>
                           </>
+                        )
+                      )}
+
+                      {isSendAlert.mssg === "confirm" && (
+                        <>
+                          <div className="flex justify-center items-center mt-3">
+                            <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
+                            <span className="ml-[5px] mr-[5px]">or</span>
+                            <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
+                          </div>
+                          <div className="mt-3 mb-3">{handleShareList()}</div>
                         </>
-                      )
-                    )}
+                      )}
+                    </div>
+                  </ModalUi>
 
-                    {isSendAlert.mssg === "confirm" && (
-                      <>
-                        <div className="flex justify-center items-center mt-3">
-                          <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
-                          <span className="ml-[5px] mr-[5px]">or</span>
-                          <span className="h-[1px] w-[20%] bg-[#ccc]"></span>
+                  {/* this modal is used show send mail  message and after send mail success message */}
+                  <ModalUi
+                    isOpen={isSend}
+                    title={"Mails Sent"}
+                    handleClose={() => {
+                      setIsSend(false);
+                      setSignerPos([]);
+                    }}
+                  >
+                    <div className="h-[100%] p-[20px]">
+                      {mailStatus === "success" ? (
+                        <div className="text-center mb-[10px]">
+                          <DotLottieReact
+                            dotLottieRefCallback={null}
+                            src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
+                            autoplay
+                            loop={false}
+                            className="w-[120px] h-[120px] mx-auto"
+                          />
+                          <p>
+                            You have successfully sent mails to all recipients!
+                          </p>
+                          {isCurrUser && (
+                            <p>Do you want to sign documents right now ?</p>
+                          )}
                         </div>
-                        <div className="mt-3 mb-3">{handleShareList()}</div>
-                      </>
-                    )}
-                  </div>
-                </ModalUi>
+                      ) : (
+                        <p>Please setup mail adapter to send mail!</p>
+                      )}
+                      {!mailStatus && (
+                        <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+                      )}
+                      {isCurrUser && (
+                        <button
+                          onClick={() => {
+                            handleRecipientSign();
+                          }}
+                          type="button"
+                          className="op-btn op-btn-primary mr-1"
+                        >
+                          Yes
+                        </button>
+                      )}
 
-                {/* this modal is used show send mail  message and after send mail success message */}
-                <ModalUi
-                  isOpen={isSend}
-                  title={"Mails Sent"}
-                  handleClose={() => {
-                    setIsSend(false);
-                    setSignerPos([]);
-                  }}
-                >
-                  <div className="h-[100%] p-[20px]">
-                    {mailStatus === "success" ? (
-                      <div className="text-center mb-[10px]">
-                        <DotLottieReact
-                          dotLottieRefCallback={null}
-                          src="https://lottie.host/00a72a09-f2d4-493a-9b2d-2843bf067638/Ic7jJ44wLJ.json"
-                          autoplay
-                          loop={false}
-                          className="w-[120px] h-[120px] mx-auto"
-                        />
-                        <p>
-                          You have successfully sent mails to all recipients!
-                        </p>
-                        {isCurrUser && (
-                          <p>Do you want to sign documents right now ?</p>
-                        )}
-                      </div>
-                    ) : (
-                      <p>Please setup mail adapter to send mail!</p>
-                    )}
-                    {!mailStatus && (
-                      <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-                    )}
-                    {isCurrUser && (
                       <button
                         onClick={() => {
-                          handleRecipientSign();
+                          setIsSend(false);
+                          setSignerPos([]);
                         }}
                         type="button"
-                        className="op-btn op-btn-primary mr-1"
+                        className="op-btn op-btn-ghost"
                       >
-                        Yes
+                        {isCurrUser ? "No" : "Close"}
                       </button>
+                    </div>
+                  </ModalUi>
+                  <ModalUi
+                    isOpen={isShowEmail}
+                    title={"signers alert"}
+                    handleClose={() => {
+                      setIsShowEmail(false);
+                    }}
+                  >
+                    <div className="h-[100%] p-[20px]">
+                      <p>Please select signer for add placeholder!</p>
+                      <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
+                      <button
+                        onClick={() => {
+                          setIsShowEmail(false);
+                        }}
+                        type="button"
+                        className="op-btn op-btn-primary"
+                      >
+                        Ok
+                      </button>
+                    </div>
+                  </ModalUi>
+                  <PlaceholderCopy
+                    isPageCopy={isPageCopy}
+                    setIsPageCopy={setIsPageCopy}
+                    xyPostion={signerPos}
+                    setXyPostion={setSignerPos}
+                    allPages={allPages}
+                    pageNumber={pageNumber}
+                    signKey={signKey}
+                    Id={uniqueId}
+                    widgetType={widgetType}
+                    setUniqueId={setUniqueId}
+                    tempSignerId={tempSignerId}
+                    setTempSignerId={setTempSignerId}
+                  />
+                  <DropdownWidgetOption
+                    type={radioButtonWidget}
+                    title="Radio group"
+                    showDropdown={isRadio}
+                    setShowDropdown={setIsRadio}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+                  <DropdownWidgetOption
+                    type="checkbox"
+                    title="Checkbox"
+                    showDropdown={isCheckbox}
+                    setShowDropdown={setIsCheckbox}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+                  <DropdownWidgetOption
+                    type="dropdown"
+                    title="Dropdown options"
+                    showDropdown={showDropdown}
+                    setShowDropdown={setShowDropdown}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+
+                  {/* pdf header which contain funish back button */}
+                  <Header
+                    isPlaceholder={true}
+                    pageNumber={pageNumber}
+                    allPages={allPages}
+                    changePage={changePage}
+                    pdfDetails={pdfDetails}
+                    signerPos={signerPos}
+                    signersdata={signersdata}
+                    isMailSend={isMailSend}
+                    alertSendEmail={alertSendEmail}
+                    isShowHeader={true}
+                    currentSigner={true}
+                    dataTut4="reactourFour"
+                  />
+
+                  <div
+                    ref={divRef}
+                    data-tut="reactourSecond"
+                    className="h-[95%]"
+                  >
+                    {containerWH && (
+                      <RenderPdf
+                        pageNumber={pageNumber}
+                        pdfNewWidth={pdfNewWidth}
+                        pdfDetails={pdfDetails}
+                        signerPos={signerPos}
+                        successEmail={false}
+                        numPages={numPages}
+                        pageDetails={pageDetails}
+                        placeholder={true}
+                        drop={drop}
+                        handleDeleteSign={handleDeleteSign}
+                        handleTabDrag={handleTabDrag}
+                        handleStop={handleStop}
+                        setPdfLoadFail={setPdfLoadFail}
+                        pdfLoadFail={pdfLoadFail}
+                        setSignerPos={setSignerPos}
+                        containerWH={containerWH}
+                        setIsResize={setIsResize}
+                        setZIndex={setZIndex}
+                        setIsPageCopy={setIsPageCopy}
+                        signersdata={signersdata}
+                        setSignKey={setSignKey}
+                        setSignerObjId={setSignerObjId}
+                        handleLinkUser={handleLinkUser}
+                        setUniqueId={setUniqueId}
+                        isDragging={isDragging}
+                        setShowDropdown={setShowDropdown}
+                        setWidgetType={setWidgetType}
+                        setIsRadio={setIsRadio}
+                        setIsCheckbox={setIsCheckbox}
+                        setCurrWidgetsDetails={setCurrWidgetsDetails}
+                        setSelectWidgetId={setSelectWidgetId}
+                        selectWidgetId={selectWidgetId}
+                        handleNameModal={setIsNameModal}
+                        setTempSignerId={setTempSignerId}
+                        uniqueId={uniqueId}
+                        setPdfRenderHeight={setPdfRenderHeight}
+                        pdfRenderHeight={pdfRenderHeight}
+                        handleTextSettingModal={handleTextSettingModal}
+                        pdfOriginalWH={pdfOriginalWH}
+                        setScale={setScale}
+                        scale={scale}
+                      />
                     )}
-
-                    <button
-                      onClick={() => {
-                        setIsSend(false);
-                        setSignerPos([]);
-                      }}
-                      type="button"
-                      className="op-btn op-btn-ghost"
-                    >
-                      {isCurrUser ? "No" : "Close"}
-                    </button>
                   </div>
-                </ModalUi>
-                <ModalUi
-                  isOpen={isShowEmail}
-                  title={"signers alert"}
-                  handleClose={() => {
-                    setIsShowEmail(false);
-                  }}
-                >
-                  <div className="h-[100%] p-[20px]">
-                    <p>Please select signer for add placeholder!</p>
-                    <div className="w-full h-[1px] bg-[#9f9f9f] my-[15px]"></div>
-                    <button
-                      onClick={() => {
-                        setIsShowEmail(false);
-                      }}
-                      type="button"
-                      className="op-btn op-btn-primary"
-                    >
-                      Ok
-                    </button>
-                  </div>
-                </ModalUi>
-                <PlaceholderCopy
-                  isPageCopy={isPageCopy}
-                  setIsPageCopy={setIsPageCopy}
-                  xyPostion={signerPos}
-                  setXyPostion={setSignerPos}
-                  allPages={allPages}
-                  pageNumber={pageNumber}
-                  signKey={signKey}
-                  Id={uniqueId}
-                  widgetType={widgetType}
-                  setUniqueId={setUniqueId}
-                  tempSignerId={tempSignerId}
-                  setTempSignerId={setTempSignerId}
-                />
-                <DropdownWidgetOption
-                  type={radioButtonWidget}
-                  title="Radio group"
-                  showDropdown={isRadio}
-                  setShowDropdown={setIsRadio}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-                <DropdownWidgetOption
-                  type="checkbox"
-                  title="Checkbox"
-                  showDropdown={isCheckbox}
-                  setShowDropdown={setIsCheckbox}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-                <DropdownWidgetOption
-                  type="dropdown"
-                  title="Dropdown options"
-                  showDropdown={showDropdown}
-                  setShowDropdown={setShowDropdown}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-
-                {/* pdf header which contain funish back button */}
-                <Header
-                  isPlaceholder={true}
-                  pageNumber={pageNumber}
-                  allPages={allPages}
-                  changePage={changePage}
-                  pdfDetails={pdfDetails}
-                  signerPos={signerPos}
-                  signersdata={signersdata}
-                  isMailSend={isMailSend}
-                  alertSendEmail={alertSendEmail}
-                  isShowHeader={true}
-                  currentSigner={true}
-                  dataTut4="reactourFour"
-                />
-                <div
-                  ref={divRef}
-                  data-tut="reactourSecond"
-                  className="h-[95%]  "
-                >
-                  {containerWH && (
-                    <RenderPdf
-                      pageNumber={pageNumber}
-                      pdfNewWidth={pdfNewWidth}
-                      pdfDetails={pdfDetails}
-                      signerPos={signerPos}
-                      successEmail={false}
-                      numPages={numPages}
-                      pageDetails={pageDetails}
-                      placeholder={true}
-                      drop={drop}
-                      handleDeleteSign={handleDeleteSign}
-                      handleTabDrag={handleTabDrag}
-                      handleStop={handleStop}
-                      setPdfLoadFail={setPdfLoadFail}
-                      pdfLoadFail={pdfLoadFail}
-                      setSignerPos={setSignerPos}
-                      containerWH={containerWH}
-                      setIsResize={setIsResize}
-                      setZIndex={setZIndex}
-                      setIsPageCopy={setIsPageCopy}
-                      signersdata={signersdata}
-                      setSignKey={setSignKey}
-                      setSignerObjId={setSignerObjId}
-                      handleLinkUser={handleLinkUser}
-                      setUniqueId={setUniqueId}
-                      isDragging={isDragging}
-                      setShowDropdown={setShowDropdown}
-                      setWidgetType={setWidgetType}
-                      setIsRadio={setIsRadio}
-                      setIsCheckbox={setIsCheckbox}
-                      setCurrWidgetsDetails={setCurrWidgetsDetails}
-                      setSelectWidgetId={setSelectWidgetId}
-                      selectWidgetId={selectWidgetId}
-                      handleNameModal={setIsNameModal}
-                      setTempSignerId={setTempSignerId}
-                      uniqueId={uniqueId}
-                      setPdfRenderHeight={setPdfRenderHeight}
-                      pdfRenderHeight={pdfRenderHeight}
-                      handleTextSettingModal={handleTextSettingModal}
-                      pdfOriginalWH={pdfOriginalWH}
-                      setScale={setScale}
-                      scale={scale}
-                    />
-                  )}
                 </div>
               </div>
-            </div>
 
-            {/* signature button */}
-            <div
-              className={`w-[23%] bg-[#FFFFFF] min-h-screen autoSignScroll hide-scrollbar`}
-            >
-              <div className={`max-h-screen`}>
-                {isMobile ? (
-                  <div>
-                    <WidgetComponent
-                      dataTut="reactourFirst"
-                      dataTut2="reactourSecond"
-                      pdfUrl={isMailSend}
-                      dragSignature={dragSignature}
-                      signRef={signRef}
-                      handleDivClick={handleDivClick}
-                      handleMouseLeave={handleMouseLeave}
-                      isDragSign={isDragSign}
-                      dragStamp={dragStamp}
-                      dragRef={dragRef}
-                      isDragStamp={isDragStamp}
-                      isSignYourself={false}
-                      addPositionOfSignature={addPositionOfSignature}
-                      signerPos={signerPos}
-                      signersdata={signersdata}
-                      isSelectListId={isSelectListId}
-                      setSignerObjId={setSignerObjId}
-                      setIsSelectId={setIsSelectId}
-                      setContractName={setContractName}
-                      isSigners={true}
-                      setIsShowEmail={setIsShowEmail}
-                      isMailSend={isMailSend}
-                      setSelectedEmail={setSelectedEmail}
-                      selectedEmail={selectedEmail}
-                      setUniqueId={setUniqueId}
-                      setRoleName={setRoleName}
-                      initial={true}
-                      sendInOrder={pdfDetails[0].SendinOrder}
-                      setSignersData={setSignersData}
-                      blockColor={blockColor}
-                      setBlockColor={setBlockColor}
-                      setIsAddSigner={setIsAddSigner}
-                      handleDeleteUser={handleDeleteUser}
-                    />
-                  </div>
-                ) : (
-                  <div>
-                    <div
-                      className="hidden md:block w-full h-full bg-base-100"
-                      aria-disabled
-                    >
-                      <SignerListPlace
+              {/* signature button */}
+              <div
+                className={`w-full md:w-[23%] bg-[#FFFFFF]  overflow-y-auto hide-scrollbar`}
+              >
+                <div className={`max-h-screen`}>
+                  {isMobile ? (
+                    <div>
+                      <WidgetComponent
+                        dataTut="reactourFirst"
+                        dataTut2="reactourSecond"
+                        pdfUrl={isMailSend}
+                        dragSignature={dragSignature}
+                        signRef={signRef}
+                        handleDivClick={handleDivClick}
+                        handleMouseLeave={handleMouseLeave}
+                        isDragSign={isDragSign}
+                        dragStamp={dragStamp}
+                        dragRef={dragRef}
+                        isDragStamp={isDragStamp}
+                        isSignYourself={false}
+                        addPositionOfSignature={addPositionOfSignature}
                         signerPos={signerPos}
                         signersdata={signersdata}
                         isSelectListId={isSelectListId}
                         setSignerObjId={setSignerObjId}
                         setIsSelectId={setIsSelectId}
                         setContractName={setContractName}
+                        isSigners={true}
+                        setIsShowEmail={setIsShowEmail}
+                        isMailSend={isMailSend}
+                        setSelectedEmail={setSelectedEmail}
+                        selectedEmail={selectedEmail}
                         setUniqueId={setUniqueId}
                         setRoleName={setRoleName}
+                        initial={true}
                         sendInOrder={pdfDetails[0].SendinOrder}
                         setSignersData={setSignersData}
                         blockColor={blockColor}
                         setBlockColor={setBlockColor}
-                        isMailSend={isMailSend}
                         setIsAddSigner={setIsAddSigner}
                         handleDeleteUser={handleDeleteUser}
-                        roleName={roleName}
-                        // handleAddSigner={handleAddSigner}
                       />
-                      <div data-tut="reactourSecond">
-                        <WidgetComponent
+                    </div>
+                  ) : (
+                    <div>
+                      <div
+                        className="hidden md:block w-full h-full bg-base-100"
+                        aria-disabled
+                      >
+                        <SignerListPlace
+                          signerPos={signerPos}
+                          signersdata={signersdata}
+                          isSelectListId={isSelectListId}
+                          setSignerObjId={setSignerObjId}
+                          setIsSelectId={setIsSelectId}
+                          setContractName={setContractName}
+                          setUniqueId={setUniqueId}
+                          setRoleName={setRoleName}
+                          sendInOrder={pdfDetails[0].SendinOrder}
+                          setSignersData={setSignersData}
+                          blockColor={blockColor}
+                          setBlockColor={setBlockColor}
                           isMailSend={isMailSend}
-                          dragSignature={dragSignature}
-                          signRef={signRef}
-                          handleDivClick={handleDivClick}
-                          handleMouseLeave={handleMouseLeave}
-                          isDragSign={isDragSign}
-                          dragStamp={dragStamp}
-                          dragRef={dragRef}
-                          isDragStamp={isDragStamp}
-                          isSignYourself={false}
-                          addPositionOfSignature={addPositionOfSignature}
-                          initial={true}
+                          setIsAddSigner={setIsAddSigner}
+                          handleDeleteUser={handleDeleteUser}
+                          roleName={roleName}
+                          // handleAddSigner={handleAddSigner}
                         />
+                        <div data-tut="reactourSecond">
+                          <WidgetComponent
+                            isMailSend={isMailSend}
+                            dragSignature={dragSignature}
+                            signRef={signRef}
+                            handleDivClick={handleDivClick}
+                            handleMouseLeave={handleMouseLeave}
+                            isDragSign={isDragSign}
+                            dragStamp={dragStamp}
+                            dragRef={dragRef}
+                            isDragStamp={isDragStamp}
+                            isSignYourself={false}
+                            addPositionOfSignature={addPositionOfSignature}
+                            initial={true}
+                          />
+                        </div>
                       </div>
                     </div>
-                  </div>
-                )}
+                  )}
+                </div>
               </div>
             </div>
           </div>
         )}
-      </DndProvider>
-      <div>
+
         <ModalUi
           isOpen={isAlreadyPlace.status}
           title={"Document Alert"}
@@ -2235,7 +2235,7 @@ function PlaceHolderSign() {
           handleData={handleWidgetdefaultdata}
           isSubscribe={isSubscribe}
         />
-      </div>
+      </DndProvider>
     </>
   );
 }
diff --git a/apps/OpenSign/src/pages/SignyourselfPdf.js b/apps/OpenSign/src/pages/SignyourselfPdf.js
index 17a5030a5..cf2d75b38 100644
--- a/apps/OpenSign/src/pages/SignyourselfPdf.js
+++ b/apps/OpenSign/src/pages/SignyourselfPdf.js
@@ -456,13 +456,10 @@ function SignYourSelf() {
     );
     const dragTypeValue = item?.text ? item.text : monitor.type;
     const widgetValue = getWidgetValue(dragTypeValue);
-    const widgetWidth = defaultWidthHeight(dragTypeValue).width;
-    const widgetHeight = defaultWidthHeight(dragTypeValue).height;
     const widgetTypeExist = ["name", "company", "job title", "email"].includes(
       dragTypeValue
     );
-    // const scale = pdfOriginalWH.width / containerWH.width;
-    const containerScale = containerWH.width / pdfOriginalWH.width;
+    const containerScale = containerWH?.width / pdfOriginalWH?.width || 1;
 
     if (item === "onclick") {
       const getWidth = widgetTypeExist
@@ -476,17 +473,12 @@ function SignYourSelf() {
           ? defaultWidthHeight(dragTypeValue).height
           : "";
       dropObj = {
-        xPosition:
-          (containerWH.width / 2 - widgetWidth / 2) / (containerScale * scale),
-        yPosition:
-          (containerWH.height / 2 - widgetHeight / 2) /
-          (containerScale * scale),
-        isDrag: false,
+        xPosition: containerWH.width / 2,
+        yPosition: containerWH.height / 2,
         isStamp:
           (dragTypeValue === "stamp" || dragTypeValue === "image") && true,
         key: key,
         type: dragTypeValue,
-        yBottom: window.innerHeight / 2 - 60,
         scale: containerScale,
         Width: getWidth / (containerScale * scale),
         Height: getHeight / (containerScale * scale),
@@ -535,16 +527,12 @@ function SignYourSelf() {
         return object.pageNumber === pageNumber;
       });
       const updateData = filterDropPos[0].pos;
-
-      // if (updateData.length > dropData.length) {
       const newSignPos = updateData.concat(dropData);
       let xyPos = {
         pageNumber: pageNumber,
         pos: newSignPos
       };
       xyPostion.splice(index, 1, xyPos);
-
-      // }
     } else {
       const xyPos = {
         pageNumber: pageNumber,
@@ -1385,7 +1373,7 @@ function SignYourSelf() {
             </div>
 
             <div
-              className={`w-full md:w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
+              className={`w-full md:w-[23%] bg-[#FFFFFF]  overflow-y-auto hide-scrollbar`}
             >
               <div className={`max-h-screen`}>
                 {!isCompleted ? (
diff --git a/apps/OpenSign/src/pages/TemplatePlaceholder.js b/apps/OpenSign/src/pages/TemplatePlaceholder.js
index d3f9a4592..b1baf13a1 100644
--- a/apps/OpenSign/src/pages/TemplatePlaceholder.js
+++ b/apps/OpenSign/src/pages/TemplatePlaceholder.js
@@ -1284,7 +1284,7 @@ const TemplatePlaceholder = () => {
     setIsTextSetting(value);
   };
   return (
-    <div>
+    <>
       <Title title={"Template"} />
       <DndProvider backend={HTML5Backend}>
         {isLoading.isLoad ? (
@@ -1292,378 +1292,385 @@ const TemplatePlaceholder = () => {
         ) : handleError ? (
           <HandleError handleError={handleError} />
         ) : (
-          <div className="flex min-h-screen flex-row justify-center op-card overflow-hidden  bg-base-300 relative">
-            {/* this component used for UI interaction and show their functionality */}
-            {!checkTourStatus && (
-              //this tour component used in your html component where you want to put
-              //onRequestClose function to close tour
-              //steps is defined what will be your messages and style also
-              //isOpen is takes boolean value to open
-              <Tour
-                onRequestClose={closeTour}
-                steps={tourConfig}
-                isOpen={templateTour}
-                rounded={5}
-                closeWithMask={false}
+          <div>
+            <div className="relative op-card overflow-hidden flex flex-col md:flex-row justify-between bg-base-300">
+              {/* this component used for UI interaction and show their functionality */}
+              {!checkTourStatus && (
+                //this tour component used in your html component where you want to put
+                //onRequestClose function to close tour
+                //steps is defined what will be your messages and style also
+                //isOpen is takes boolean value to open
+                <Tour
+                  onRequestClose={closeTour}
+                  steps={tourConfig}
+                  isOpen={templateTour}
+                  rounded={5}
+                  closeWithMask={false}
+                />
+              )}
+              {isAddRole && (
+                <Tour
+                  onRequestClose={() => setIsAddRole(false)}
+                  steps={tourAddRole}
+                  isOpen={isAddRole}
+                  rounded={5}
+                  closeWithMask={false}
+                />
+              )}
+              {/* this component used to render all pdf pages in left side */}
+              <RenderAllPdfPage
+                signPdfUrl={pdfDetails[0].URL}
+                allPages={allPages}
+                setAllPages={setAllPages}
+                setPageNumber={setPageNumber}
+                setSignBtnPosition={setSignBtnPosition}
+                pageNumber={pageNumber}
               />
-            )}
-            {isAddRole && (
-              <Tour
-                onRequestClose={() => setIsAddRole(false)}
-                steps={tourAddRole}
-                isOpen={isAddRole}
-                rounded={5}
-                closeWithMask={false}
-              />
-            )}
-            {/* this component used to render all pdf pages in left side */}
-            <RenderAllPdfPage
-              signPdfUrl={pdfDetails[0].URL}
-              allPages={allPages}
-              setAllPages={setAllPages}
-              setPageNumber={setPageNumber}
-              setSignBtnPosition={setSignBtnPosition}
-              pageNumber={pageNumber}
-            />
 
-            {/* pdf render view */}
-            <div className="min-h-screen w-full md:w-[57%] flex md:mr-4">
-              <PdfZoom
-                setScale={setScale}
-                scale={scale}
-                pdfOriginalWH={pdfOriginalWH}
-                containerWH={containerWH}
-                setZoomPercent={setZoomPercent}
-                zoomPercent={zoomPercent}
-              />
-              <div className="min-h-screen w-full md:w-[97%] ">
-                {/* this modal is used show alert set placeholder for all signers before send mail */}
-                <ModalUi
-                  isOpen={isSendAlert}
-                  title={"Fields required"}
-                  handleClose={() => setIsSendAlert(false)}
-                >
-                  <div className="h-full p-[20px]">
-                    <p>
-                      Please add at least one signature field for all roles.
-                    </p>
-                  </div>
-                </ModalUi>
-                <ModalUi
-                  isOpen={!IsReceipent}
-                  title={"Roles"}
-                  handleClose={() => setIsReceipent(true)}
-                >
-                  <div className="h-full p-[20px] text-center font-medium">
-                    <p>Please add roles first</p>
-                  </div>
-                </ModalUi>
-                {/* this modal is used show send mail  message and after send mail success message */}
-                <ModalUi
-                  isOpen={isCreateDocModal}
-                  title={"Create Document"}
-                  handleClose={() => setIsCreateDocModal(false)}
-                >
-                  <div className="h-full p-[20px]">
-                    <p>
-                      Do you want to create a document using the template you
-                      just created ?
-                    </p>
-                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
-                    {currentEmail.length > 0 && (
-                      <>
-                        <button
-                          onClick={() => {
-                            handleCreateDocModal();
-                          }}
-                          type="button"
-                          className="op-btn op-btn-primary"
-                        >
-                          Yes
-                        </button>
-                        <button
-                          onClick={() => {
-                            setIsCreateDocModal(false);
-                          }}
-                          type="button"
-                          className="op-btn op-btn-secondary ml-2"
-                        >
-                          No
-                        </button>
-                      </>
+              {/* pdf render view */}
+              <div className=" w-full  md:w-[57%] flex mr-4">
+                <PdfZoom
+                  setScale={setScale}
+                  scale={scale}
+                  pdfOriginalWH={pdfOriginalWH}
+                  containerWH={containerWH}
+                  setZoomPercent={setZoomPercent}
+                  zoomPercent={zoomPercent}
+                />
+                <div className=" w-full md:w-[95%] ">
+                  {/* this modal is used show alert set placeholder for all signers before send mail */}
+                  <ModalUi
+                    isOpen={isSendAlert}
+                    title={"Fields required"}
+                    handleClose={() => setIsSendAlert(false)}
+                  >
+                    <div className="h-full p-[20px]">
+                      <p>
+                        Please add at least one signature field for all roles.
+                      </p>
+                    </div>
+                  </ModalUi>
+                  <ModalUi
+                    isOpen={!IsReceipent}
+                    title={"Roles"}
+                    handleClose={() => setIsReceipent(true)}
+                  >
+                    <div className="h-full p-[20px] text-center font-medium">
+                      <p>Please add roles first</p>
+                    </div>
+                  </ModalUi>
+                  {/* this modal is used show send mail  message and after send mail success message */}
+                  <ModalUi
+                    isOpen={isCreateDocModal}
+                    title={"Create Document"}
+                    handleClose={() => setIsCreateDocModal(false)}
+                  >
+                    <div className="h-full p-[20px]">
+                      <p>
+                        Do you want to create a document using the template you
+                        just created ?
+                      </p>
+                      <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+                      {currentEmail.length > 0 && (
+                        <>
+                          <button
+                            onClick={() => {
+                              handleCreateDocModal();
+                            }}
+                            type="button"
+                            className="op-btn op-btn-primary"
+                          >
+                            Yes
+                          </button>
+                          <button
+                            onClick={() => {
+                              setIsCreateDocModal(false);
+                            }}
+                            type="button"
+                            className="op-btn op-btn-secondary ml-2"
+                          >
+                            No
+                          </button>
+                        </>
+                      )}
+                    </div>
+                  </ModalUi>
+                  {isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
+                  <ModalUi
+                    isOpen={isShowEmail}
+                    title={"signers alert"}
+                    handleClose={() => {
+                      setIsShowEmail(false);
+                    }}
+                  >
+                    <div className="h-full p-[20px]">
+                      <p>Please select signer for add placeholder!</p>
+                      <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
+                      <button
+                        onClick={() => {
+                          setIsShowEmail(false);
+                        }}
+                        type="button"
+                        className="op-btn op-btn-primary"
+                      >
+                        Ok
+                      </button>
+                    </div>
+                  </ModalUi>
+                  <DropdownWidgetOption
+                    type={radioButtonWidget}
+                    title="Radio group"
+                    showDropdown={isRadio}
+                    setShowDropdown={setIsRadio}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+                  <DropdownWidgetOption
+                    type="checkbox"
+                    title="Checkbox"
+                    showDropdown={isCheckbox}
+                    setShowDropdown={setIsCheckbox}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+                  <DropdownWidgetOption
+                    type="dropdown"
+                    title="Dropdown options"
+                    showDropdown={showDropdown}
+                    setShowDropdown={setShowDropdown}
+                    handleSaveWidgetsOptions={handleSaveWidgetsOptions}
+                    currWidgetsDetails={currWidgetsDetails}
+                    setCurrWidgetsDetails={setCurrWidgetsDetails}
+                    handleClose={handleNameModal}
+                    isSubscribe={isSubscribe}
+                  />
+                  <PlaceholderCopy
+                    isPageCopy={isPageCopy}
+                    setIsPageCopy={setIsPageCopy}
+                    xyPostion={signerPos}
+                    setXyPostion={setSignerPos}
+                    allPages={allPages}
+                    pageNumber={pageNumber}
+                    signKey={signKey}
+                    // signerObjId={signerObjId}
+                    Id={uniqueId}
+                  />
+                  {/* pdf header which contain funish back button */}
+                  <Header
+                    completeBtnTitle={"Save"}
+                    isPlaceholder={true}
+                    pageNumber={pageNumber}
+                    allPages={allPages}
+                    changePage={changePage}
+                    pdfDetails={pdfDetails}
+                    signerPos={signerPos}
+                    signersdata={signersdata}
+                    isMailSend={isMailSend}
+                    alertSendEmail={alertSendEmail}
+                    isShowHeader={true}
+                    currentSigner={true}
+                    setIsEditTemplate={handleEditTemplateModal}
+                    dataTut4="reactourFour"
+                  />
+                  <div
+                    ref={divRef}
+                    data-tut="reactourThird"
+                    className="h-[95%]"
+                  >
+                    {containerWH && (
+                      <RenderPdf
+                        pageNumber={pageNumber}
+                        pdfNewWidth={pdfNewWidth}
+                        pdfDetails={pdfDetails}
+                        signerPos={signerPos}
+                        successEmail={false}
+                        numPages={numPages}
+                        pageDetails={pageDetails}
+                        placeholder={true}
+                        drop={drop}
+                        handleDeleteSign={handleDeleteSign}
+                        handleTabDrag={handleTabDrag}
+                        handleStop={handleStop}
+                        setPdfLoadFail={setPdfLoadFail}
+                        pdfLoadFail={pdfLoadFail}
+                        setSignerPos={setSignerPos}
+                        containerWH={containerWH}
+                        setIsResize={setIsResize}
+                        setZIndex={setZIndex}
+                        handleLinkUser={handleLinkUser}
+                        setUniqueId={setUniqueId}
+                        signersdata={signersdata}
+                        setIsPageCopy={setIsPageCopy}
+                        setSignKey={setSignKey}
+                        setSignerObjId={setSignerObjId}
+                        isDragging={isDragging}
+                        setShowDropdown={setShowDropdown}
+                        setCurrWidgetsDetails={setCurrWidgetsDetails}
+                        setWidgetType={setWidgetType}
+                        setIsRadio={setIsRadio}
+                        setSelectWidgetId={setSelectWidgetId}
+                        selectWidgetId={selectWidgetId}
+                        setIsCheckbox={setIsCheckbox}
+                        handleNameModal={setIsNameModal}
+                        setPdfRenderHeight={setPdfRenderHeight}
+                        pdfRenderHeight={pdfRenderHeight}
+                        handleTextSettingModal={handleTextSettingModal}
+                        pdfOriginalWH={pdfOriginalWH}
+                        setScale={setScale}
+                        scale={scale}
+                      />
                     )}
                   </div>
-                </ModalUi>
-                {isCreateDoc && <LoaderWithMsg isLoading={isLoading} />}
-                <ModalUi
-                  isOpen={isShowEmail}
-                  title={"signers alert"}
-                  handleClose={() => {
-                    setIsShowEmail(false);
-                  }}
-                >
-                  <div className="h-full p-[20px]">
-                    <p>Please select signer for add placeholder!</p>
-                    <div className="h-[1px] w-full my-[15px] bg-[#9f9f9f]"></div>
-                    <button
-                      onClick={() => {
-                        setIsShowEmail(false);
-                      }}
-                      type="button"
-                      className="op-btn op-btn-primary"
-                    >
-                      Ok
-                    </button>
-                  </div>
-                </ModalUi>
-                <DropdownWidgetOption
-                  type={radioButtonWidget}
-                  title="Radio group"
-                  showDropdown={isRadio}
-                  setShowDropdown={setIsRadio}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-                <DropdownWidgetOption
-                  type="checkbox"
-                  title="Checkbox"
-                  showDropdown={isCheckbox}
-                  setShowDropdown={setIsCheckbox}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-                <DropdownWidgetOption
-                  type="dropdown"
-                  title="Dropdown options"
-                  showDropdown={showDropdown}
-                  setShowDropdown={setShowDropdown}
-                  handleSaveWidgetsOptions={handleSaveWidgetsOptions}
-                  currWidgetsDetails={currWidgetsDetails}
-                  setCurrWidgetsDetails={setCurrWidgetsDetails}
-                  handleClose={handleNameModal}
-                  isSubscribe={isSubscribe}
-                />
-                <PlaceholderCopy
-                  isPageCopy={isPageCopy}
-                  setIsPageCopy={setIsPageCopy}
-                  xyPostion={signerPos}
-                  setXyPostion={setSignerPos}
-                  allPages={allPages}
-                  pageNumber={pageNumber}
-                  signKey={signKey}
-                  // signerObjId={signerObjId}
-                  Id={uniqueId}
-                />
-                {/* pdf header which contain funish back button */}
-                <Header
-                  completeBtnTitle={"Save"}
-                  isPlaceholder={true}
-                  pageNumber={pageNumber}
-                  allPages={allPages}
-                  changePage={changePage}
-                  pdfDetails={pdfDetails}
-                  signerPos={signerPos}
-                  signersdata={signersdata}
-                  isMailSend={isMailSend}
-                  alertSendEmail={alertSendEmail}
-                  isShowHeader={true}
-                  currentSigner={true}
-                  setIsEditTemplate={handleEditTemplateModal}
-                  dataTut4="reactourFour"
-                />
-                <div ref={divRef} data-tut="reactourThird" className="h-[95%]">
-                  {containerWH && (
-                    <RenderPdf
-                      pageNumber={pageNumber}
-                      pdfNewWidth={pdfNewWidth}
-                      pdfDetails={pdfDetails}
-                      signerPos={signerPos}
-                      successEmail={false}
-                      numPages={numPages}
-                      pageDetails={pageDetails}
-                      placeholder={true}
-                      drop={drop}
-                      handleDeleteSign={handleDeleteSign}
-                      handleTabDrag={handleTabDrag}
-                      handleStop={handleStop}
-                      setPdfLoadFail={setPdfLoadFail}
-                      pdfLoadFail={pdfLoadFail}
-                      setSignerPos={setSignerPos}
-                      containerWH={containerWH}
-                      setIsResize={setIsResize}
-                      setZIndex={setZIndex}
-                      handleLinkUser={handleLinkUser}
-                      setUniqueId={setUniqueId}
-                      signersdata={signersdata}
-                      setIsPageCopy={setIsPageCopy}
-                      setSignKey={setSignKey}
-                      setSignerObjId={setSignerObjId}
-                      isDragging={isDragging}
-                      setShowDropdown={setShowDropdown}
-                      setCurrWidgetsDetails={setCurrWidgetsDetails}
-                      setWidgetType={setWidgetType}
-                      setIsRadio={setIsRadio}
-                      setSelectWidgetId={setSelectWidgetId}
-                      selectWidgetId={selectWidgetId}
-                      setIsCheckbox={setIsCheckbox}
-                      handleNameModal={setIsNameModal}
-                      setPdfRenderHeight={setPdfRenderHeight}
-                      pdfRenderHeight={pdfRenderHeight}
-                      handleTextSettingModal={handleTextSettingModal}
-                      pdfOriginalWH={pdfOriginalWH}
-                      setScale={setScale}
-                      scale={scale}
-                    />
-                  )}
                 </div>
               </div>
-            </div>
-            {/* signature button */}
-            {isMobile ? (
-              <div>
-                <WidgetComponent
-                  dataTut="reactourFirst"
-                  dataTut2="reactourSecond"
-                  pdfUrl={isMailSend}
-                  dragSignature={dragSignature}
-                  signRef={signRef}
-                  handleDivClick={handleDivClick}
-                  handleMouseLeave={handleMouseLeave}
-                  isDragSign={isDragSign}
-                  dragStamp={dragStamp}
-                  dragRef={dragRef}
-                  isDragStamp={isDragStamp}
-                  isSignYourself={false}
-                  addPositionOfSignature={addPositionOfSignature}
-                  signerPos={signerPos}
-                  signersdata={signersdata}
-                  isSelectListId={isSelectListId}
-                  setSignerObjId={setSignerObjId}
-                  setIsSelectId={setIsSelectId}
-                  setContractName={setContractName}
-                  isSigners={isSigners}
-                  setIsShowEmail={setIsShowEmail}
-                  isMailSend={isMailSend}
-                  setSelectedEmail={setSelectedEmail}
-                  selectedEmail={selectedEmail}
-                  handleAddSigner={handleAddSigner}
-                  setUniqueId={setUniqueId}
-                  setRoleName={setRoleName}
-                  handleDeleteUser={handleDeleteUser}
-                  handleRoleChange={handleRoleChange}
-                  handleOnBlur={handleOnBlur}
-                  title={"Roles"}
-                  initial={true}
-                  isTemplateFlow={true}
-                  sendInOrder={pdfDetails[0].SendinOrder}
-                  setSignersData={setSignersData}
-                  blockColor={blockColor}
-                  setBlockColor={setBlockColor}
-                />
-              </div>
-            ) : (
-              <div
-                className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
-              >
-                <div className={`max-h-screen`}>
-                  <SignerListPlace
-                    isMailSend={isMailSend}
+              {/* signature button */}
+              {isMobile ? (
+                <div>
+                  <WidgetComponent
+                    dataTut="reactourFirst"
+                    dataTut2="reactourSecond"
+                    pdfUrl={isMailSend}
+                    dragSignature={dragSignature}
+                    signRef={signRef}
+                    handleDivClick={handleDivClick}
+                    handleMouseLeave={handleMouseLeave}
+                    isDragSign={isDragSign}
+                    dragStamp={dragStamp}
+                    dragRef={dragRef}
+                    isDragStamp={isDragStamp}
+                    isSignYourself={false}
+                    addPositionOfSignature={addPositionOfSignature}
                     signerPos={signerPos}
                     signersdata={signersdata}
                     isSelectListId={isSelectListId}
                     setSignerObjId={setSignerObjId}
-                    setRoleName={setRoleName}
                     setIsSelectId={setIsSelectId}
                     setContractName={setContractName}
+                    isSigners={isSigners}
+                    setIsShowEmail={setIsShowEmail}
+                    isMailSend={isMailSend}
+                    setSelectedEmail={setSelectedEmail}
+                    selectedEmail={selectedEmail}
                     handleAddSigner={handleAddSigner}
                     setUniqueId={setUniqueId}
+                    setRoleName={setRoleName}
                     handleDeleteUser={handleDeleteUser}
                     handleRoleChange={handleRoleChange}
                     handleOnBlur={handleOnBlur}
                     title={"Roles"}
-                    sendInOrder={pdfDetails[0]?.SendinOrder}
+                    initial={true}
+                    isTemplateFlow={true}
+                    sendInOrder={pdfDetails[0].SendinOrder}
                     setSignersData={setSignersData}
                     blockColor={blockColor}
                     setBlockColor={setBlockColor}
                   />
-                  <div data-tut="reactourSecond">
-                    <WidgetComponent
+                </div>
+              ) : (
+                <div
+                  className={`w-[23%] bg-[#FFFFFF] min-h-screen overflow-y-auto hide-scrollbar`}
+                >
+                  <div className={`max-h-screen`}>
+                    <SignerListPlace
                       isMailSend={isMailSend}
-                      dragSignature={dragSignature}
-                      signRef={signRef}
-                      handleDivClick={handleDivClick}
-                      handleMouseLeave={handleMouseLeave}
-                      isDragSign={isDragSign}
-                      dragStamp={dragStamp}
-                      dragRef={dragRef}
-                      isDragStamp={isDragStamp}
-                      isSignYourself={false}
-                      addPositionOfSignature={addPositionOfSignature}
+                      signerPos={signerPos}
+                      signersdata={signersdata}
+                      isSelectListId={isSelectListId}
+                      setSignerObjId={setSignerObjId}
+                      setRoleName={setRoleName}
+                      setIsSelectId={setIsSelectId}
+                      setContractName={setContractName}
+                      handleAddSigner={handleAddSigner}
+                      setUniqueId={setUniqueId}
+                      handleDeleteUser={handleDeleteUser}
+                      handleRoleChange={handleRoleChange}
+                      handleOnBlur={handleOnBlur}
                       title={"Roles"}
-                      initial={true}
-                      isTemplateFlow={true}
+                      sendInOrder={pdfDetails[0]?.SendinOrder}
+                      setSignersData={setSignersData}
+                      blockColor={blockColor}
+                      setBlockColor={setBlockColor}
                     />
+                    <div data-tut="reactourSecond">
+                      <WidgetComponent
+                        isMailSend={isMailSend}
+                        dragSignature={dragSignature}
+                        signRef={signRef}
+                        handleDivClick={handleDivClick}
+                        handleMouseLeave={handleMouseLeave}
+                        isDragSign={isDragSign}
+                        dragStamp={dragStamp}
+                        dragRef={dragRef}
+                        isDragStamp={isDragStamp}
+                        isSignYourself={false}
+                        addPositionOfSignature={addPositionOfSignature}
+                        title={"Roles"}
+                        initial={true}
+                        isTemplateFlow={true}
+                      />
+                    </div>
                   </div>
                 </div>
-              </div>
-            )}
+              )}
+            </div>
           </div>
         )}
+
+        <div data-tut="reactourAddbtn--observe">
+          <AddRoleModal
+            isModalRole={isModalRole}
+            roleName={roleName}
+            signersdata={signersdata}
+            setRoleName={setRoleName}
+            handleAddRole={handleAddRole}
+            handleCloseRoleModal={handleCloseRoleModal}
+          />
+        </div>
+        <div>
+          <LinkUserModal
+            handleAddUser={handleAddUser}
+            isAddUser={isAddUser}
+            uniqueId={uniqueId}
+            closePopup={closePopup}
+            signersData={signersdata}
+          />
+        </div>
+        <ModalUi
+          title={"Edit Template"}
+          isOpen={isEditTemplate}
+          handleClose={handleEditTemplateModal}
+        >
+          <EditTemplate
+            template={pdfDetails?.[0]}
+            onSuccess={handleEditTemplateForm}
+          />
+        </ModalUi>
+        <WidgetNameModal
+          widgetName={widgetName}
+          defaultdata={currWidgetsDetails}
+          isOpen={isNameModal}
+          handleClose={handleNameModal}
+          handleData={handleWidgetdefaultdata}
+          isSubscribe={isSubscribe}
+        />
+        <TextFontSetting
+          isTextSetting={isTextSetting}
+          setIsTextSetting={setIsTextSetting}
+          fontSize={fontSize}
+          setFontSize={setFontSize}
+          fontColor={fontColor}
+          setFontColor={setFontColor}
+          handleSaveFontSize={handleSaveFontSize}
+          currWidgetsDetails={currWidgetsDetails}
+        />
       </DndProvider>
-      <div data-tut="reactourAddbtn--observe">
-        <AddRoleModal
-          isModalRole={isModalRole}
-          roleName={roleName}
-          signersdata={signersdata}
-          setRoleName={setRoleName}
-          handleAddRole={handleAddRole}
-          handleCloseRoleModal={handleCloseRoleModal}
-        />
-      </div>
-      <div>
-        <LinkUserModal
-          handleAddUser={handleAddUser}
-          isAddUser={isAddUser}
-          uniqueId={uniqueId}
-          closePopup={closePopup}
-          signersData={signersdata}
-        />
-      </div>
-      <ModalUi
-        title={"Edit Template"}
-        isOpen={isEditTemplate}
-        handleClose={handleEditTemplateModal}
-      >
-        <EditTemplate
-          template={pdfDetails?.[0]}
-          onSuccess={handleEditTemplateForm}
-        />
-      </ModalUi>
-      <WidgetNameModal
-        widgetName={widgetName}
-        defaultdata={currWidgetsDetails}
-        isOpen={isNameModal}
-        handleClose={handleNameModal}
-        handleData={handleWidgetdefaultdata}
-        isSubscribe={isSubscribe}
-      />
-      <TextFontSetting
-        isTextSetting={isTextSetting}
-        setIsTextSetting={setIsTextSetting}
-        fontSize={fontSize}
-        setFontSize={setFontSize}
-        fontColor={fontColor}
-        setFontColor={setFontColor}
-        handleSaveFontSize={handleSaveFontSize}
-        currWidgetsDetails={currWidgetsDetails}
-      />
-    </div>
+    </>
   );
 };