chore(playwright): projects screenshot is main container only (#9440)

web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx

@@ -12,7 +12,7 @@ import { localizeAndPrettify } from "@/lib/time";
 import Button from "@/refresh-components/buttons/Button";
 import Text from "@/refresh-components/texts/Text";
 import { PageSelector } from "@/components/PageSelector";
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import { useEffect, useState, useMemo } from "react";
 import { SvgAlertTriangle } from "@opal/icons";
 export interface IndexAttemptErrorsModalProps {
   errors: {
@@ -22,66 +22,93 @@ export interface IndexAttemptErrorsModalProps {
   onClose: () => void;
   onResolveAll: () => void;
   isResolvingErrors?: boolean;
+  onPageChange?: (page: number) => void;
+  currentPage?: number;
+  pageSize?: number;
 }
 
-const ROW_HEIGHT = 65; // 4rem + 1px for border
-
 export default function IndexAttemptErrorsModal({
   errors,
   onClose,
   onResolveAll,
   isResolvingErrors = false,
+  pageSize: propPageSize,
 }: IndexAttemptErrorsModalProps) {
-  const observerRef = useRef<ResizeObserver | null>(null);
-  const [pageSize, setPageSize] = useState(10);
+  const [calculatedPageSize, setCalculatedPageSize] = useState(10);
   const [currentPage, setCurrentPage] = useState(1);
 
-  const tableContainerRef = useCallback((container: HTMLDivElement | null) => {
-    if (observerRef.current) {
-      observerRef.current.disconnect();
-      observerRef.current = null;
-    }
+  // Reset to page 1 when the error list actually changes
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [errors.items.length, errors.total_items]);
 
-    if (!container) return;
+  useEffect(() => {
+    const calculatePageSize = () => {
+      // Modal height is 75% of viewport height
+      const modalHeight = window.innerHeight * 0.6;
 
-    const observer = new ResizeObserver(() => {
-      const thead = container.querySelector("thead");
-      const theadHeight = thead?.getBoundingClientRect().height ?? 0;
-      const availableHeight = container.clientHeight - theadHeight;
-      const newPageSize = Math.max(3, Math.floor(availableHeight / ROW_HEIGHT));
-      setPageSize(newPageSize);
-    });
+      // Estimate heights (in pixels):
+      // - Modal header (title + description): ~120px
+      // - Table header: ~40px
+      // - Pagination section: ~80px
+      // - Modal padding: ~64px (32px top + 32px bottom)
+      const fixedHeight = 120 + 40 + 80 + 64;
 
-    observer.observe(container);
-    observerRef.current = observer;
+      // Available height for table rows
+      const availableHeight = modalHeight - fixedHeight;
+
+      // Each table row is approximately 60px (including borders and padding)
+      const rowHeight = 60;
+
+      // Calculate how many rows can fit, with a minimum of 3
+      const rowsPerPage = Math.max(3, Math.floor(availableHeight / rowHeight));
+
+      setCalculatedPageSize((prev) => {
+        // Only update if the new size is significantly different to prevent flickering
+        if (Math.abs(prev - rowsPerPage) > 0) {
+          return rowsPerPage;
+        }
+        return prev;
+      });
+    };
+
+    // Initial calculation
+    calculatePageSize();
+
+    // Debounced resize handler to prevent excessive recalculation
+    let resizeTimeout: NodeJS.Timeout;
+    const debouncedCalculatePageSize = () => {
+      clearTimeout(resizeTimeout);
+      resizeTimeout = setTimeout(calculatePageSize, 100);
+    };
+
+    window.addEventListener("resize", debouncedCalculatePageSize);
+    return () => {
+      window.removeEventListener("resize", debouncedCalculatePageSize);
+      clearTimeout(resizeTimeout);
+    };
   }, []);
 
-  // When data changes, reset to page 1.
-  // When page size changes (resize), preserve the user's position by
-  // finding which new page contains the first item they were looking at.
-  const prevPageSizeRef = useRef(pageSize);
+  // Separate effect to reset current page when page size changes
   useEffect(() => {
-    if (pageSize !== prevPageSizeRef.current) {
-      setCurrentPage((prev) => {
-        const firstVisibleIndex = (prev - 1) * prevPageSizeRef.current;
-        const newPage = Math.floor(firstVisibleIndex / pageSize) + 1;
-        const totalPages = Math.ceil(errors.items.length / pageSize);
-        return Math.min(newPage, totalPages);
-      });
-      prevPageSizeRef.current = pageSize;
-    } else {
-      setCurrentPage(1);
-    }
-  }, [errors.items.length, pageSize]);
+    setCurrentPage(1);
+  }, [calculatedPageSize]);
 
+  const pageSize = propPageSize || calculatedPageSize;
+
+  // Memoize pagination calculations to prevent unnecessary recalculations
   const paginationData = useMemo(() => {
     const totalPages = Math.ceil(errors.items.length / pageSize);
     const startIndex = (currentPage - 1) * pageSize;
-    const currentPageItems = errors.items.slice(
+    const endIndex = startIndex + pageSize;
+    const currentPageItems = errors.items.slice(startIndex, endIndex);
+
+    return {
+      totalPages,
+      currentPageItems,
       startIndex,
-      startIndex + pageSize
-    );
-    return { totalPages, currentPageItems };
+      endIndex,
+    };
   }, [errors.items, pageSize, currentPage]);
 
   const hasUnresolvedErrors = useMemo(
@@ -110,7 +137,7 @@ export default function IndexAttemptErrorsModal({
           onClose={onClose}
           height="fit"
         />
-        <Modal.Body height="full">
+        <Modal.Body>
           {!isResolvingErrors && (
             <div className="flex flex-col gap-2 flex-shrink-0">
               <Text as="p">
@@ -125,10 +152,7 @@ export default function IndexAttemptErrorsModal({
             </div>
           )}
 
-          <div
-            ref={tableContainerRef}
-            className="flex-1 w-full overflow-hidden min-h-0"
-          >
+          <div className="flex-1 overflow-hidden min-h-0">
             <Table>
               <TableHeader>
                 <TableRow>
@@ -141,11 +165,11 @@ export default function IndexAttemptErrorsModal({
               <TableBody>
                 {paginationData.currentPageItems.length > 0 ? (
                   paginationData.currentPageItems.map((error) => (
-                    <TableRow key={error.id} className="h-[4rem]">
-                      <TableCell>
+                    <TableRow key={error.id} className="h-[60px] max-h-[60px]">
+                      <TableCell className="h-[60px] align-top">
                         {localizeAndPrettify(error.time_created)}
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="h-[60px] align-top">
                         {error.document_link ? (
                           <a
                             href={error.document_link}
@@ -159,12 +183,12 @@ export default function IndexAttemptErrorsModal({
                           error.document_id || error.entity_id || "Unknown"
                         )}
                       </TableCell>
-                      <TableCell>
-                        <div className="flex items-center h-[2rem] overflow-y-auto whitespace-normal">
+                      <TableCell className="h-[60px] align-top p-0">
+                        <div className="h-[60px] overflow-y-auto p-4 whitespace-normal">
                           {error.failure_message}
                         </div>
                       </TableCell>
-                      <TableCell>
+                      <TableCell className="h-[60px] align-top">
                         <span
                           className={`px-2 py-1 rounded text-xs ${
                             error.is_resolved
@@ -178,7 +202,7 @@ export default function IndexAttemptErrorsModal({
                     </TableRow>
                   ))
                 ) : (
-                  <TableRow className="h-[60px]">
+                  <TableRow>
                     <TableCell
                       colSpan={4}
                       className="text-center py-8 text-gray-500"
@@ -191,24 +215,32 @@ export default function IndexAttemptErrorsModal({
             </Table>
           </div>
 
-          {paginationData.totalPages > 1 && (
-            <div className="flex w-full justify-center">
-              <PageSelector
-                totalPages={paginationData.totalPages}
-                currentPage={currentPage}
-                onPageChange={handlePageChange}
-              />
+          <div className="flex-shrink-0">
+            {paginationData.totalPages > 1 && (
+              <div className="flex-1 flex justify-center mb-2">
+                <PageSelector
+                  totalPages={paginationData.totalPages}
+                  currentPage={currentPage}
+                  onPageChange={handlePageChange}
+                />
+              </div>
+            )}
+
+            <div className="flex w-full">
+              <div className="flex gap-2 ml-auto">
+                {hasUnresolvedErrors && !isResolvingErrors && (
+                  // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
+                  <Button
+                    onClick={onResolveAll}
+                    className="ml-4 whitespace-nowrap"
+                  >
+                    Resolve All
+                  </Button>
+                )}
+              </div>
             </div>
-          )}
+          </div>
         </Modal.Body>
-        <Modal.Footer>
-          {hasUnresolvedErrors && !isResolvingErrors && (
-            // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
-            <Button onClick={onResolveAll} className="ml-4 whitespace-nowrap">
-              Resolve All
-            </Button>
-          )}
-        </Modal.Footer>
       </Modal.Content>
     </Modal>
   );

web/tests/e2e/chat/project_files_visual_regression.spec.ts

@@ -169,7 +169,9 @@ test.describe("Project Files visual regression", () => {
       .first();
     await expect(iconWrapper).toBeVisible();
 
-    await expectElementScreenshot(filesSection, {
+    const container = page.locator("[data-main-container]");
+    await expect(container).toBeVisible();
+    await expectElementScreenshot(container, {
       name: "project-files-long-underscore-filename",
     });