fix: paginated tables not working in safari (#1231)

Author: astandrik

src/components/PaginatedTable/PaginatedTable.scss

@@ -40,6 +40,10 @@
     &__head {
         z-index: 1;
         @include sticky-top();
+
+        &-row {
+            display: table;
+        }
     }
 
     &__sort-icon-container {
@@ -165,4 +169,8 @@
     &__head-cell-wrapper:hover > &__resize-handler {
         visibility: visible;
     }
+
+    &__table-chunk {
+        display: block;
+    }
 }

src/components/PaginatedTable/TableChunk.tsx

@@ -7,6 +7,7 @@ import {useAutoRefreshInterval} from '../../utils/hooks';
 import {ResponseError} from '../Errors/ResponseError';
 
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
+import {b} from './shared';
 import type {Column, FetchData, GetRowClassName, SortParams} from './types';
 
 const DEBOUNCE_TIMEOUT = 200;
@@ -142,7 +143,12 @@ export const TableChunk = <T, F>({
     const chunkHeight = dataLength ? dataLength * rowHeight : limit * rowHeight;
 
     return (
-        <tbody ref={ref} id={id.toString()} style={{height: `${chunkHeight}px`}}>
+        <tbody
+            className={b('table-chunk')}
+            ref={ref}
+            id={id.toString()}
+            style={{height: `${chunkHeight}px`}}
+        >
             {renderContent()}
         </tbody>
     );

src/components/PaginatedTable/TableHead.tsx

@@ -194,7 +194,7 @@ export const TableHead = <T,>({
     const renderTableHead = () => {
         return (
             <thead className={b('head')}>
-                <tr>
+                <tr className={b('head-row')}>
                     {columns.map((column) => {
                         const sortOrder =
                             sortParams.columnId === column.name ? sortParams.sortOrder : undefined;