From 1886befacffc8bff8e31e6a136cca0f4ab19db30 Mon Sep 17 00:00:00 2001
From: Niklas Aronsson <niklasar@axis.com>
Date: Fri, 21 Apr 2023 13:51:11 +0200
Subject: [PATCH] Bazaar: Set TablePagination as a div

The default component is a "td" which will cause DOM validation
warnings.

Signed-off-by: Niklas Aronsson <niklasar@axis.com>
---
 .../components/ProjectPreview/ProjectPreview.tsx   | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
index 8f7160600a..39319b6353 100644
--- a/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
+++ b/plugins/bazaar/src/components/ProjectPreview/ProjectPreview.tsx
@@ -15,9 +15,14 @@
  */
 
 import React, { ChangeEvent, useState } from 'react';
-import { Content } from '@backstage/core-components';
 import { ProjectCard } from '../ProjectCard/ProjectCard';
-import { makeStyles, Grid, TablePagination, GridSize } from '@material-ui/core';
+import {
+  Box,
+  makeStyles,
+  Grid,
+  TablePagination,
+  GridSize,
+} from '@material-ui/core';
 import { BazaarProject } from '../../types';
 import { Entity } from '@backstage/catalog-model';
 
@@ -80,7 +85,7 @@ export const ProjectPreview = ({
   }
 
   return (
-    <Content className={classes.content} noPadding>
+    <Box className={classes.content}>
       <Grid wrap="wrap" container spacing={3}>
         {bazaarProjects
           .slice((page - 1) * rows, rows * page)
@@ -101,6 +106,7 @@ export const ProjectPreview = ({
 
       {useTablePagination && (
         <TablePagination
+          component="div"
           className={classes.pagination}
           rowsPerPageOptions={[12, 24, 48, 96]}
           count={bazaarProjects?.length}
@@ -114,6 +120,6 @@ export const ProjectPreview = ({
           }}
         />
       )}
-    </Content>
+    </Box>
   );
 };