fix: widen dialog on large screens (sm:max-w-3xl lg:max-w-5xl), fix React #185 close-reset cycle by separating useEffect

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

CHANGELOG.md

@@ -16,7 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - **Page Jump Input**: New input field in pagination bar allows users to type a page number and press Enter to jump directly to any page.
   - **Enhanced Search Bar**: Redesigned with a subtle background container and borderless input for a cleaner, more modern appearance.
   - **Improved Table Styling**: Even/odd row striping (`bg-muted/20`), refined selected-row highlighting (`bg-primary/5`), uppercase column headers with tighter tracking, rounded table border, and improved cell padding.
-  - **Responsive Dialog**: Widened dialog from `max-w-2xl` to `max-w-3xl` for better data density on larger screens; filter panel supports 3-column layout on wide viewports (`lg:grid-cols-3`).
+  - **Responsive Dialog**: Responsive dialog sizing from `sm:max-w-3xl` to `lg:max-w-5xl` for optimal data density across screen sizes; filter panel supports 3-column layout on wide viewports (`lg:grid-cols-3`).
+  - **Fixed Close-Reset Cycle**: Separated dialog close-reset logic into its own `useEffect` (depends only on `open`) to prevent cascading state updates that could trigger React Error #185 (Maximum update depth exceeded) when selecting a record.
   - **8 New Unit Tests**: Comprehensive test coverage for skeleton loading (column count validation), sticky header classes, page jump navigation (valid/invalid/single-page), and loading overlay behavior.
 
 - **"Browse All" Button for Lookup Fields** (`@object-ui/fields`): Added an always-visible "Browse All" (table icon) button next to the Lookup quick-select trigger. Opens the full RecordPickerDialog directly, regardless of record count — making enterprise features (multi-column table, sort/filter bar, cell renderers) discoverable at all times. Previously, the dialog was only accessible via the "Show All Results" in-popover button, which only appeared when total records exceeded the page size. The button uses accessible `aria-label`, `title`, and Lucide `TableProperties` icon. Keyboard and screen reader accessible.

packages/fields/src/widgets/RecordPickerDialog.tsx

@@ -460,13 +460,11 @@ export function RecordPickerDialog({
     [sortField, sortDirection],
   );
 
-  // Fetch when dialog opens, page changes, sort changes, or filters change
+  // Reset state when dialog closes — separate from the fetch effect so that
+  // resetting currentPage / sortField (which are fetch-effect deps) does not
+  // re-trigger the fetch effect and cause cascading re-renders (React #185).
   useEffect(() => {
-    if (open) {
-      fetchRecords(searchQuery || undefined, currentPage, currentSort);
-    }
     if (!open) {
-      // Reset state on close
       setSearchQuery('');
       setCurrentPage(1);
       setError(null);
@@ -478,11 +476,23 @@ export function RecordPickerDialog({
       setFilterValues({});
       setColumnWidths({});
       setPageJumpValue('');
-      // Reset pending selection to match current value
       setPendingSelection(new Set(
         multiple ? (Array.isArray(value) ? value : []) : [],
       ));
     }
+    // Intentionally depends only on `open` — `multiple` and `value` are
+    // captured at close-time and don't need to trigger resets while closed.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  // Fetch when dialog is open and pagination / sort / filter deps change
+  useEffect(() => {
+    if (open) {
+      fetchRecords(searchQuery || undefined, currentPage, currentSort);
+    }
+    // `fetchRecords` and `searchQuery` are intentionally excluded:
+    // fetchRecords is stable (useCallback), searchQuery triggers its own
+    // debounced fetch in handleSearchChange.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, currentPage, currentSort, mergedFilter]);
 
@@ -813,7 +823,7 @@ export function RecordPickerDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent
-        className="max-w-3xl w-[95vw] sm:w-full max-h-[85vh] sm:max-h-[80vh] flex flex-col gap-0"
+        className="w-[95vw] sm:max-w-3xl lg:max-w-5xl max-h-[85vh] sm:max-h-[80vh] flex flex-col gap-0"
         data-testid="record-picker-dialog"
       >
         <DialogHeader>