Merge branch 'main' into feat/document-table-filters

packages/ui/components/field/field.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { type Field, FieldType } from '@prisma/client';
 import { createPortal } from 'react-dom';
@@ -20,24 +20,37 @@ export function FieldContainerPortal({
   children,
   className = '',
 }: FieldContainerPortalProps) {
+  const alternativePortalRoot = document.getElementById('document-field-portal-root');
+
   const coords = useFieldPageCoords(field);
 
   const isCheckboxOrRadioField = field.type === 'CHECKBOX' || field.type === 'RADIO';
 
-  const style = {
-    top: `${coords.y}px`,
-    left: `${coords.x}px`,
-    ...(!isCheckboxOrRadioField && {
-      height: `${coords.height}px`,
-      width: `${coords.width}px`,
-    }),
-  };
+  const style = useMemo(() => {
+    const portalBounds = alternativePortalRoot?.getBoundingClientRect();
+
+    const bounds = {
+      top: `${coords.y}px`,
+      left: `${coords.x}px`,
+      ...(!isCheckboxOrRadioField && {
+        height: `${coords.height}px`,
+        width: `${coords.width}px`,
+      }),
+    };
+
+    if (portalBounds) {
+      bounds.top = `${coords.y - portalBounds.top}px`;
+      bounds.left = `${coords.x - portalBounds.left}px`;
+    }
+
+    return bounds;
+  }, [coords, isCheckboxOrRadioField]);
 
   return createPortal(
     <div className={cn('absolute', className)} style={style}>
       {children}
     </div>,
-    document.body,
+    alternativePortalRoot ?? document.body,
   );
 }
 

packages/ui/primitives/alert.tsx

@@ -58,7 +58,7 @@ const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('text-sm', className)} {...props} />
+  <div ref={ref} className={cn('mt-2 text-sm', className)} {...props} />
 ));
 
 AlertDescription.displayName = 'AlertDescription';