docs: update field coordinates documentation and improve devmode (#2359)

apps/documentation/pages/developers/developer-mode/field-coordinates.mdx

@@ -5,14 +5,22 @@ description: Learn how to get the coordinates of a field in a document.
 
 ## Field Coordinates
 
-Field coordinates represent the position of a field in a document. They are returned in the `pageX` and `pageY` properties of the field.
+Field coordinates represent the position of a field in a document. They are returned in the `pageX`, `pageY`, `width` and `height` properties of the field.
 
 To enable field coordinates, you can use the `devmode` query parameter.
 
 ```bash
-https://app.documenso.com/documents/<document-id>/edit?devmode=true
+# Legacy editor
+
+https://app.documenso.com/t/<team-url>/documents/<envelope-id>/legacy_editor?devmode=true
 ```
 
-You should then see the coordinates on top of each field.
+![Field Coordinates Legacy Editor](/developer-mode/field-coordinates-legacy-editor.webp)
 
-![Field Coordinates](/developer-mode/field-coordinates.webp)
+```bash
+# New editor
+
+https://app.documenso.com/t/<team-url>/documents/<envelope-id>/edit?step=addFields&devmode=true
+```
+
+![Field Coordinates New Editor](/developer-mode/field-coordinates-new-editor.webp)

packages/ui/primitives/document-flow/field-item.tsx

@@ -269,8 +269,8 @@ export const FieldItem = ({
             className={cn(
               'absolute -top-16 left-0 right-0 rounded-md p-2 text-center text-xs text-gray-700',
               {
-                'bg-foreground/5 border-primary border': !fieldHasCheckedValues,
-                'bg-documenso-200 border-primary border': fieldHasCheckedValues,
+                'border border-primary bg-foreground/5': !fieldHasCheckedValues,
+                'border border-primary bg-documenso-200': fieldHasCheckedValues,
               },
             )}
           >
@@ -321,8 +321,25 @@ export const FieldItem = ({
         </div>
 
         {isDevMode && (
-          <div className="text-muted-foreground absolute -top-6 left-0 right-0 text-center text-[10px]">
-            {`x: ${field.pageX.toFixed(2)}, y: ${field.pageY.toFixed(2)}`}
+          <div className="absolute -top-20 left-1/2 z-50 -translate-x-1/2 rounded-md border border-border bg-background/95 px-2 py-1 shadow-sm backdrop-blur-sm">
+            <div className="flex flex-col gap-0.5 text-[9px]">
+              <span>
+                <span className="text-muted-foreground">Pos X:&nbsp;</span>
+                <span className="font-mono text-foreground">{field.pageX.toFixed(2)}</span>
+              </span>
+              <span>
+                <span className="text-muted-foreground">Pos Y:&nbsp;</span>
+                <span className="font-mono text-foreground">{field.pageY.toFixed(2)}</span>
+              </span>
+              <span>
+                <span className="text-muted-foreground">Width:&nbsp;</span>
+                <span className="font-mono text-foreground">{field.pageWidth.toFixed(2)}</span>
+              </span>
+              <span>
+                <span className="text-muted-foreground">Height:&nbsp;</span>
+                <span className="font-mono text-foreground">{field.pageHeight.toFixed(2)}</span>
+              </span>
+            </div>
           </div>
         )}
       </div>