From 506e63f4e1f837a97bd6b67b2917bc53b9c51209 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zolt=C3=A1n=20Bedi?= <zoltan.bedi@gmail.com>
Date: Fri, 8 Jul 2022 12:28:41 +0200
Subject: [PATCH] Table: Fix scrollbar is hidden by pagination  (#51501)

* Table: Pagination fix centering

* Table: Fix scrollbar is hidden by pagination

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
---
 .../grafana-ui/src/components/Table/Table.tsx |  5 +++--
 .../grafana-ui/src/components/Table/styles.ts | 20 ++++++++++++-------
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 30e72a5636d..6bf310ddefa 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -257,13 +257,14 @@ export const Table: FC<Props> = memo((props: Props) => {
   if (enablePagination) {
     const itemsRangeStart = state.pageIndex * state.pageSize + 1;
     let itemsRangeEnd = itemsRangeStart + state.pageSize - 1;
-    const isSmall = width < 500;
+    const isSmall = width < 550;
     if (itemsRangeEnd > data.length) {
       itemsRangeEnd = data.length;
     }
     paginationEl = (
       <div className={tableStyles.paginationWrapper}>
-        <div>
+        {isSmall ? null : <div className={tableStyles.paginationItem} />}
+        <div className={tableStyles.paginationCenterItem}>
           <Pagination
             currentPage={state.pageIndex + 1}
             numberOfPages={pageOptions.length}
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index bc7261316c2..7ee588594f1 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -106,6 +106,7 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       width: 100%;
       overflow: auto;
       display: flex;
+      flex-direction: column;
     `,
     thead: css`
       label: thead;
@@ -182,17 +183,22 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       li {
         margin-bottom: 0;
       }
-      div:not(:only-child):first-child {
-        flex-grow: 0.6;
-      }
-      position: absolute;
-      bottom: 0;
-      left: 0;
+    `,
+    paginationItem: css`
+      flex: 20%;
+    `,
+    paginationCenterItem: css`
+      flex: 100%;
+      display: flex;
+      justify-content: center;
     `,
     paginationSummary: css`
       color: ${theme.colors.text.secondary};
       font-size: ${theme.typography.bodySmall.fontSize};
-      margin-left: auto;
+      display: flex;
+      justify-content: flex-end;
+      flex: 20%;
+      padding-right: ${theme.spacing(1)};
     `,
 
     tableContentWrapper: (totalColumnsWidth: number) => {