Table: Fixes issue with pagination summary causing scrollbar (#65189)

* Table: Fixes pagination rows counter not causing scrollbar

* remove unused style

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} />}
+        <Pagination
-        <div className={tableStyles.paginationCenterItem}>
+          currentPage={state.pageIndex + 1}
-          <Pagination
+          numberOfPages={pageOptions.length}
-            currentPage={state.pageIndex + 1}
+          showSmallVersion={isSmall}
-            numberOfPages={pageOptions.length}
+          onNavigate={onNavigate}
-            showSmallVersion={isSmall}
+        />
-            onNavigate={onNavigate}
-          />
-        </div>
         {isSmall ? null : (
           <div className={tableStyles.paginationSummary}>
             {itemsRangeStart} - {itemsRangeEnd} of {data.length} rows

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: ${theme.spacing(0, 1, 0, 2)};
-      padding-right: ${theme.spacing(1)};
     `,
 
     tableContentWrapper: (totalColumnsWidth: number) => {