Fix table overflow and pagination rounded border

trento-project · Sep 27, 2024 · 5b6bac9 · 5b6bac9
1 parent cd1f823
commit 5b6bac9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 17 deletions.
diff --git a/assets/js/common/Pagination/Pagination.jsx b/assets/js/common/Pagination/Pagination.jsx
@@ -70,11 +70,15 @@ function Pagination({
   currentItemsPerPage = defaultItemsPerPage,
   itemsPerPageOptions = defaultItemsPerPageOptions,
   pageStats = null,
+  className = '',
   onChangeItemsPerPage = noop,
 }) {
   return (
     <div
-      className="flex justify-between p-2 bg-gray-50 width-full"
+      className={classNames(
+        'flex justify-between p-2 bg-gray-50 width-full',
+        className
+      )}
       data-testid="pagination"
     >
       <div className="flex flex-row items-center">

diff --git a/assets/js/common/Table/Table.jsx b/assets/js/common/Table/Table.jsx
@@ -182,12 +182,9 @@ function Table({
           })}
         >
           <div
-            className={classNames(
-              'min-w-fit shadow overflow-hidden rounded-b-lg',
-              {
-                'rounded-t-lg': !hasFilters,
-              }
-            )}
+            className={classNames('min-w-fit shadow rounded-b-lg', {
+              'rounded-t-lg': !hasFilters,
+            })}
           >
             {header}
             <table className="min-w-full leading-normal table-fixed">
@@ -252,6 +249,7 @@ function Table({
             </table>
             {pagination && (
               <Pagination
+                className="rounded-b-lg"
                 hasPrev={currentPage > 1}
                 hasNext={currentPage < totalPages}
                 currentItemsPerPage={currentItemsPerPage}

diff --git a/assets/js/common/Table/Table.test.jsx b/assets/js/common/Table/Table.test.jsx
@@ -139,16 +139,6 @@ describe('Table component', () => {
       .forEach((tableRow) => expect(tableRow).toHaveClass(pxClass));
   });
 
-  it('should have wrapper div classes with rounded and overflow hidden', () => {
-    const data = tableDataFactory.buildList(10);
-
-    render(<Table config={tableConfig} data={data} />);
-
-    const wrapperDiv = screen.getByRole('table').closest('div');
-
-    expect(wrapperDiv).toHaveClass(/rounded/, 'overflow-hidden');
-  });
-
   describe('filtering', () => {
     it('should filter by the chosen filter option with default filter', async () => {
       const data = tableDataFactory.buildList(10);

diff --git a/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx b/assets/js/pages/ActivityLogPage/ActivityLogPage.jsx
@@ -158,6 +158,7 @@ function ActivityLogPage() {
           }
         />
         <Pagination
+          className="rounded-b-lg"
           hasPrev={activityLogResponse.pagination?.has_previous_page}
           hasNext={activityLogResponse.pagination?.has_next_page}
           currentItemsPerPage={itemsPerPage}