fix: when zoom in tablet widget get disappeared & hide sidbar in tablet when close

Author: prafull-opensignlabs

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

@@ -309,7 +309,7 @@ function PlaceholderType(props) {
           alt="signature"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-[99%] h-full object-contain"
+          className="w-full h-full object-contain"
         />
       ) : (
         <div className="text-[11px] text-black justify-center">
@@ -327,7 +327,7 @@ function PlaceholderType(props) {
           alt="stamp"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-[99%] h-full object-contain"
+          className="w-full h-full object-contain"
         />
       ) : (
         <div className="text-[11px] text-black justify-center">
@@ -470,7 +470,7 @@ function PlaceholderType(props) {
           alt="initials"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-[99%] h-full object-contain"
+          className="w-full h-full object-contain"
         />
       ) : (
         <div className="text-[11px] text-black justify-center">
@@ -650,7 +650,7 @@ function PlaceholderType(props) {
           alt="image"
           draggable="false"
           src={props.pos.SignUrl}
-          className="w-[99%] h-full object-contain"
+          className="w-full h-full object-contain"
         />
       ) : (
         <div className="text-[11px] text-black justify-center">
@@ -761,7 +761,7 @@ function PlaceholderType(props) {
             alt="image"
             draggable="false"
             src={props.pos.SignUrl}
-            className="w-[99%] h-full object-contain"
+            className="w-full h-full object-contain"
           />
         </div>
       ) : (

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

@@ -422,7 +422,8 @@ function RenderPdf({
           style={{
             position: "relative",
             boxShadow: "rgba(17, 12, 46, 0.15) 0px 48px 100px 0px",
-            height: window.innerHeight + "px"
+            height: window.innerHeight + "px",
+            zIndex: 0
           }}
           noScrollY={false}
           noScrollX={scale === 1 ? true : false}
@@ -600,7 +601,7 @@ function RenderPdf({
                   key={index}
                   width={containerWH.width}
                   scale={scale || 1}
-                  className="z-0"
+                  className={"-z-[1]"} // when user zoom-in in tablet widgets move backward that's why pass -z-[1]
                   pageNumber={pageNumber}
                   renderAnnotationLayer={false}
                   renderTextLayer={false}

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

@@ -1,9 +1,7 @@
 import React from "react";
 import { getWidgetType } from "../../constant/Utils";
-import { useSelector } from "react-redux";
 
 function WidgetList(props) {
-  const isHeader = useSelector((state) => state.showHeader);
   return props.updateWidgets.map((item, ind) => {
     return (
       <div className="2xl:p-3 mb-[5px]" key={ind}>
@@ -24,12 +22,10 @@ function WidgetList(props) {
             }
           }}
           onMouseMove={props?.handleDivClick}
-          onMouseDown={() => {
-            props?.handleMouseLeave();
-          }}
+          onMouseDown={() => props?.handleMouseLeave()}
           onTouchStart={props?.handleDivClick}
         >
-          {item.ref && getWidgetType(item, isHeader)}
+          {item.ref && getWidgetType(item)}
         </div>
       </div>
     );

apps/OpenSign/src/components/sidebar/Sidebar.js

@@ -46,7 +46,7 @@ const Sidebar = ({ isOpen, closeSidebar }) => {
   };
   return (
     <aside
-      className={`absolute md:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] hide-scrollbar
+      className={`absolute lg:relative bg-base-100 h-screen overflow-y-auto transition-all z-[100] shadow-lg hide-scrollbar
      ${isOpen ? "w-full md:w-[300px]" : "w-0"}`}
     >
       <div className="flex px-2 py-3 gap-2 items-center shadow-md">

apps/OpenSign/src/constant/Utils.js

@@ -374,25 +374,17 @@ export const addWidgetOptions = (type) => {
       return {};
   }
 };
-export const getWidgetType = (item, isHeader) => {
+export const getWidgetType = (item) => {
   return (
     <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>}
-          <span
-            className={`${
-              isHeader && "md:text-[8px] lg:text-[15px]"
-            } md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0`}
-          >
+          <span className="md:inline-block text-center text-[15px] ml-[5px] font-semibold pr-1 md:pr-0">
             {item.type}
           </span>
         </div>
-        <div
-          className={`${
-            isHeader && "md:text-[8px] md:w-[20px] lg:text-[20px] lg:w-[40px] "
-          } text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center`}
-        >
+        <div className="text-[20px] op-btn op-btn-primary rounded-none w-[40px] h-full flex justify-center items-center">
           <i className={item.icon}></i>
         </div>
       </div>

apps/OpenSign/src/layout/HomeLayout.js

@@ -234,7 +234,7 @@ const HomeLayout = () => {
   }
 
   const closeSidebar = () => {
-    if (width <= 768) {
+    if (width <= 1023) {
       setIsOpen(false);
     }
   };