solved overflow header on logiin page

microfrontends/SignDocuments/src/Component/component/header.js

@@ -37,7 +37,7 @@ function Header({
 }) {
   const isMobile = window.innerWidth < 767;
   const navigate = useNavigate();
-
+  const isSigner = localStorage.getItem("isSigner");
   //for go to previous page
   function previousPage() {
     changePage(-1);
@@ -81,14 +81,16 @@ function Header({
 
   return (
     <div
-      style={{ paddingBottom: "5px", paddingTop: "5px" }}
+    style={{ padding: !isSigner && "5px 0px 5px 0px" }}
       className="mobileHead"
     >
       {isMobile && isShowHeader ? (
         <div
           id="navbar"
-          className="stickyHead"
-          style={{ width: window.innerWidth - 30 + "px" }}
+          className={isSigner ? "stickySignerHead" : "stickyHead"}
+          style={{
+            width: isSigner ? window.innerWidth : window.innerWidth - 30 + "px"
+          }}
         >
           <div className="preBtn2">
             <div

microfrontends/SignDocuments/src/Component/component/renderPdf.js

@@ -42,6 +42,9 @@ function RenderPdf({
   const isMobile = window.innerWidth < 767;
   const newWidth = window.innerWidth;
   const scale = isMobile ? pdfOriginalWidth / newWidth : 1;
+  //check isSigner is present in local if yes than handle login flow header in mobile view
+  const isSigner = localStorage.getItem("isSigner");
+
   //function for render placeholder block over pdf document
 
   const checkSignedSignes = (data) => {
@@ -235,7 +238,8 @@ function RenderPdf({
       {isMobile && scale ? (
         <div
           style={{
-            border: "0.1px solid #ebe8e8"
+            border: "0.1px solid #ebe8e8",
+            marginTop: isSigner && "30px"
           }}
           ref={drop}
           id="container"
@@ -1281,4 +1285,4 @@ function RenderPdf({
   );
 }
 
-export default RenderPdf;
+export default RenderPdf;

microfrontends/SignDocuments/src/Component/login.js

@@ -38,19 +38,15 @@ function Login() {
 
   const handleChange = (event) => {
     const { value } = event.target;
-
     setOTP(value);
   };
 
   //send email OTP function
-
   const SendOtp = async (e) => {
     const serverUrl =
       localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-
     const parseId =
       localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-
     if (serverUrl && localStorage) {
       setLoading(true);
       e.preventDefault();
@@ -84,13 +80,10 @@ function Login() {
     e.preventDefault();
     const serverUrl =
       localStorage.getItem("baseUrl") && localStorage.getItem("baseUrl");
-
     const parseId =
       localStorage.getItem("parseAppId") && localStorage.getItem("parseAppId");
-
     if (OTP) {
       setLoading(true);
-
       try {
         let url = `${serverUrl}functions/AuthLoginAsMail/`;
         const headers = {
@@ -102,7 +95,6 @@ function Login() {
           otp: OTP
         };
         let user = await axios.post(url, body, { headers: headers });
-
         if (user.data.result === "Invalid Otp") {
           alert("Invalid Otp");
           setLoading(false);
@@ -114,10 +106,12 @@ function Login() {
           localStorage.setItem("UserInformation", JSON.stringify(_user));
           localStorage.setItem("username", _user.name);
           localStorage.setItem("accesstoken", _user.sessionToken);
+          //save isSigner true in local to handle login flow header in mobile view
+          localStorage.setItem("isSigner", true);
           setLoading(false);
-          //navigate user to on signature page
-          // navigate(`/recipientSignPdf/${id}/${contactBookId}`);
-          navigate(`/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`);
+          navigate(
+            `/loadmf/signmicroapp/recipientSignPdf/${id}/${contactBookId}`
+          );
         }
       } catch (error) {}
     } else {
@@ -173,9 +167,7 @@ function Login() {
                 <span className="KNLO">
                   Verification code is sent to your email
                 </span>
-                <div className="card card-box"
-                style={{borderRadius:"0px"}}
-                >
+                <div className="card card-box" style={{ borderRadius: "0px" }}>
                   <div className="card-body">
                     <input
                       type="email"
@@ -190,7 +182,6 @@ function Login() {
                 <div className="btnContainer">
                   {loading ? (
                     <button
-                      // className="btn btn-info loadinBtn "
                       type="button"
                       style={{
                         background: themeColor(),
@@ -214,15 +205,7 @@ function Login() {
                         color: "white",
                         marginLeft: "0px !important"
                       }}
-                      // className="btn btn-sm otpButton"
                       onClick={(e) => SendOtp(e)}
-                      // style={{
-                      //   marginBottom: "4px",
-                      //   width: "210px",
-                      //   background: themeColor(),
-                      //   color: "white",
-                      //   fontWeight: "600"
-                      // }}
                     >
                       Send OTP
                     </button>

microfrontends/SignDocuments/src/Component/recipientSignPdf.js

@@ -74,7 +74,8 @@ function EmbedPdfImage() {
     return object.pageNumber === pageNumber;
   });
   const divRef = useRef(null);
-
+  //check isSigner is present in local if yes than handle login flow header in mobile view
+  const isSigner = localStorage.getItem("isSigner");
   useEffect(() => {
     const clientWidth = window.innerWidth;
     const pdfWidth = clientWidth - 160 - 220 - 30;
@@ -1010,8 +1011,8 @@ function EmbedPdfImage() {
           {/* pdf render view */}
           <div
             style={{
-              marginLeft: pdfOriginalWidth > 500 && "20px",
-              marginRight: pdfOriginalWidth > 500 && "20px"
+              marginLeft: !isSigner && pdfOriginalWidth > 500 && "20px",
+              marginRight: !isSigner && pdfOriginalWidth > 500 && "20px"
             }}
           >
             {/* this modal is used show this document is already sign */}
@@ -1126,9 +1127,9 @@ function EmbedPdfImage() {
           )}
         </div>
       )}
-      {/* ndD5gdaxqw */}
+   
     </DndProvider>
   );
 }
 
-export default EmbedPdfImage;
+export default EmbedPdfImage;