Table panel: Fix horizontal scrolling when pagination is enabled (#47776)

* Table panel: Fix horizontal scrolling when pagination is enabled

* Fix failing test

packages/grafana-ui/src/components/Table/Table.tsx

@@ -304,9 +304,9 @@ export const Table: FC<Props> = memo((props: Props) => {
               totalColumnsWidth={totalColumnsWidth}
             />
           )}
-          {paginationEl}
         </div>
       </CustomScrollbar>
+      {paginationEl}
     </div>
   );
 });

packages/grafana-ui/src/components/Table/styles.ts

@@ -184,6 +184,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       div:not(:only-child):first-child {
         flex-grow: 0.6;
       }
+      position: absolute;
+      bottom: 0;
+      left: 0;
     `,
     paginationSummary: css`
       color: ${theme.colors.text.secondary};
@@ -191,11 +194,16 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       margin-left: auto;
     `,
 
-    tableContentWrapper: (totalColumnsWidth: number) => css`
+    tableContentWrapper: (totalColumnsWidth: number) => {
-      width: ${totalColumnsWidth ?? '100%'};
+      const width = totalColumnsWidth !== undefined ? `${totalColumnsWidth}px` : '100%';
-      display: flex;
+
-      flex-direction: column;
+      return css`
-    `,
+        label: tableContentWrapper;
+        width: ${width};
+        display: flex;
+        flex-direction: column;
+      `;
+    },
     row: css`
       label: row;
       border-bottom: 1px solid ${borderColor};