From 5b6bac903a0c505ae951d1ff185c0fbbe077ad35 Mon Sep 17 00:00:00 2001
From: Nelson Kopliku <nelson.kopliku@suse.com>
Date: Fri, 27 Sep 2024 09:42:21 +0200
Subject: [PATCH] Fix table overflow and pagination rounded border

---
 assets/js/common/Pagination/Pagination.jsx          |  6 +++++-
 assets/js/common/Table/Table.jsx                    | 10 ++++------
 assets/js/common/Table/Table.test.jsx               | 10 ----------
 assets/js/pages/ActivityLogPage/ActivityLogPage.jsx |  1 +
 4 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/assets/js/common/Pagination/Pagination.jsx b/assets/js/common/Pagination/Pagination.jsx
index 477978dcc9..c4fd307fda 100644
--- 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
index 1725a7428c..36d13012f6 100644
--- 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
index f3503c0f51..eac9fe57f3 100644
--- 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
index f090560925..3d3301c37d 100644
--- 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}