Table Component Rounded Corners Fix (#3010)

* Adds missing class for rounded corner effect

* Adds test to check for that rounded classes also include overflow hidden

assets/js/common/Table/Table.jsx

@@ -182,9 +182,12 @@ function Table({
           })}
         >
           <div
-            className={classNames('min-w-fit shadow rounded-b-lg', {
-              'rounded-t-lg': !hasFilters,
-            })}
+            className={classNames(
+              'min-w-fit shadow overflow-hidden rounded-b-lg',
+              {
+                'rounded-t-lg': !hasFilters,
+              }
+            )}
           >
             {header}
             <table className="min-w-full leading-normal table-fixed">

assets/js/common/Table/Table.test.jsx

@@ -139,6 +139,16 @@ 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);