src/components/DrawPDFFields/index.tsx

@@ -22,6 +22,11 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
 import { UserAvatar } from '../UserAvatar'
 import _ from 'lodash'
 
+const MINIMUM_RECT_SIZE = {
+  width: 21,
+  height: 21
+} as const
+
 const DEFAULT_START_SIZE = {
   width: 140,
   height: 40
@@ -91,6 +96,7 @@ export const DrawPDFFields = (props: Props) => {
       window.removeEventListener('pointerup', handlePointerUp)
       window.removeEventListener('pointercancel', handlePointerUp)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   const refreshPdfFiles = () => {
@@ -149,6 +155,18 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Pointer event
    */
   const handlePointerUp = () => {
+    sigitFiles.forEach((s) => {
+      s.pages?.forEach((p) => {
+        // Remove drawn fields below the MINIMUM_RECT_SIZE threshhold
+        p.drawnFields = p.drawnFields.filter(
+          (f) =>
+            !(
+              f.width < MINIMUM_RECT_SIZE.width ||
+              f.height < MINIMUM_RECT_SIZE.height
+            )
+        )
+      })
+    })
     setMouseState((prev) => {
       return {
         ...prev,
@@ -157,6 +175,7 @@ export const DrawPDFFields = (props: Props) => {
         resizing: false
       }
     })
+    refreshPdfFiles()
   }
 
   /**

src/components/DrawPDFFields/style.module.scss

@@ -38,10 +38,6 @@
     visibility: hidden;
   }
 
-  &.edited {
-    outline: 1px dotted #01aaad;
-  }
-
   .resizeHandle {
     position: absolute;
     right: -5px;
@@ -99,3 +95,15 @@
     height: 21px;
   }
 }
+
+.signingRectangle {
+  position: absolute;
+  outline: 1px solid #01aaad;
+  z-index: 40;
+  background-color: #01aaad4b;
+  cursor: pointer;
+
+  &.edited {
+    outline: 1px dotted #01aaad;
+  }
+}

src/components/MarkFormField/style.module.scss

@@ -122,7 +122,7 @@
   align-items: center;
   grid-gap: 15px;
   box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1);
-  max-width: 750px;
+  max-width: 450px;
 
   &.expanded {
     display: flex;

src/components/PDFView/PdfMarkItem.tsx

@@ -32,7 +32,7 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
       <div
         ref={ref}
         onClick={handleClick}
-        className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
+        className={`file-mark ${styles.signingRectangle} ${isEdited() && styles.edited}`}
         style={{
           backgroundColor: selectedMark?.mark.npub
             ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`

src/components/PDFView/PdfMarking.tsx

@@ -70,8 +70,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
 
   const handleMarkClick = (id: number) => {
     const nextMark = currentUserMarks.find((mark) => mark.mark.id === id)
-    setSelectedMark(nextMark!)
-    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY)
+
+    if (nextMark) handleCurrentUserMarkChange(nextMark)
   }
 
   const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {

src/pages/verify/style.module.scss

@@ -53,10 +53,6 @@
 
 .mark {
   position: absolute;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 [data-dev='true'] {

src/utils/const.ts

@@ -119,6 +119,6 @@ export const SIGNATURE_PAD_OPTIONS = {
 } as const
 
 export const SIGNATURE_PAD_SIZE = {
-  width: 600,
+  width: 300,
   height: 300
 }