From b2fb7a162a481d3b01b7428c7f7f96b02630bf06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 22 Mar 2023 18:57:05 +0100
Subject: [PATCH] Table: Fixes issue with pagination summary causing scrollbar 
 (#65189)

* Table: Fixes pagination rows counter not causing scrollbar

* remove unused style
---
 .../grafana-ui/src/components/Table/Table.tsx     | 15 ++++++---------
 .../grafana-ui/src/components/Table/styles.ts     | 11 +----------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/Table.tsx b/packages/grafana-ui/src/components/Table/Table.tsx
index 69468925ec3..71bab81f4ec 100644
--- a/packages/grafana-ui/src/components/Table/Table.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.tsx
@@ -326,15 +326,12 @@ export const Table = memo((props: Props) => {
     }
     paginationEl = (
       <div className={tableStyles.paginationWrapper}>
-        {isSmall ? null : <div className={tableStyles.paginationItem} />}
-        <div className={tableStyles.paginationCenterItem}>
-          <Pagination
-            currentPage={state.pageIndex + 1}
-            numberOfPages={pageOptions.length}
-            showSmallVersion={isSmall}
-            onNavigate={onNavigate}
-          />
-        </div>
+        <Pagination
+          currentPage={state.pageIndex + 1}
+          numberOfPages={pageOptions.length}
+          showSmallVersion={isSmall}
+          onNavigate={onNavigate}
+        />
         {isSmall ? null : (
           <div className={tableStyles.paginationSummary}>
             {itemsRangeStart} - {itemsRangeEnd} of {data.length} rows
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 92008b9a9e4..b8b05bc410f 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -207,21 +207,12 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
         margin-bottom: 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};
       display: flex;
       justify-content: flex-end;
-      flex: 20%;
-      padding-right: ${theme.spacing(1)};
+      padding: ${theme.spacing(0, 1, 0, 2)};
     `,
 
     tableContentWrapper: (totalColumnsWidth: number) => {