From 36b06b90ff8928e520093ca3dc68fe9e1a1a7032 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Mon, 11 Jul 2022 09:22:55 +0200
Subject: [PATCH] Table: Fix scrollbar is hidden by pagination  (#51501)
 (#51960)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Table: Pagination fix centering

* Table: Fix scrollbar is hidden by pagination

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>
(cherry picked from commit 506e63f4e1f837a97bd6b67b2917bc53b9c51209)

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.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 7bb9d5b5b21..9e014c290dd 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;
@@ -183,17 +184,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) => {