Fixed home page table

charmverse · Oct 24, 2024 · 9886261 · 9886261
1 parent dc43bde
commit 9886261
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 32 deletions.
diff --git a/apps/scoutgame/components/home/components/HomePageTable/components/TopBuildersTable.tsx b/apps/scoutgame/components/home/components/HomePageTable/components/TopBuildersTable.tsx
@@ -1,14 +1,4 @@
-import {
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  tableCellClasses
-} from '@mui/material';
+import { Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -21,15 +11,16 @@ import { TableCellText } from './TableCellText';
 
 export function TopBuildersTable({ builders }: { builders: TopBuilderInfo[] }) {
   return (
-    <TableContainer data-test='top-builders-table' component={Paper} sx={{ px: { md: 6 } }}>
+    <TableContainer data-test='top-builders-table' component={Paper} sx={{ px: { md: 10 } }}>
       <Table aria-label='Top scouts table' size='small'>
         <TableHead>
           <TableRow
             sx={{
-              [`& .${tableCellClasses.root}`]: {
-                borderBottom: 'none',
+              '& .MuiTableCell-root': {
                 paddingLeft: '6px',
-                paddingRight: '6px'
+                paddingRight: '6px',
+                width: '16.67%',
+                borderBottom: 'none'
               }
             }}
           >
@@ -57,7 +48,12 @@ export function TopBuildersTable({ builders }: { builders: TopBuilderInfo[] }) {
               key={builder.username}
               sx={{
                 '&:last-child td, &:last-child th': { border: 0 },
-                '& .MuiTableCell-root': { p: '6px', borderBottom: '1px solid', borderBottomColor: 'background.default' }
+                '& .MuiTableCell-root': {
+                  p: '6px',
+                  borderBottom: '1px solid',
+                  borderBottomColor: 'background.default',
+                  width: '16.67%'
+                }
               }}
             >
               <TableCell align='center'>

diff --git a/apps/scoutgame/components/home/components/HomePageTable/components/TopScoutsTable.tsx b/apps/scoutgame/components/home/components/HomePageTable/components/TopScoutsTable.tsx
@@ -1,14 +1,4 @@
-import {
-  Paper,
-  Stack,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow,
-  tableCellClasses
-} from '@mui/material';
+import { Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -20,15 +10,16 @@ import { TableCellText } from './TableCellText';
 
 export function TopScoutsTable({ scouts }: { scouts: TopScout[] }) {
   return (
-    <TableContainer data-test='top-scouts-table' component={Paper} sx={{ px: { md: 6 } }}>
+    <TableContainer data-test='top-scouts-table' component={Paper} sx={{ px: { md: 10 } }}>
       <Table aria-label='Top scouts table' size='small'>
         <TableHead>
           <TableRow
             sx={{
-              [`& .${tableCellClasses.root}`]: {
-                borderBottom: 'none',
+              '& .MuiTableCell-root': {
                 paddingLeft: '6px',
-                paddingRight: '6px'
+                paddingRight: '6px',
+                width: '16.67%',
+                borderBottom: 'none'
               }
             }}
           >
@@ -56,7 +47,12 @@ export function TopScoutsTable({ scouts }: { scouts: TopScout[] }) {
               key={scout.username}
               sx={{
                 '&:last-child td, &:last-child th': { border: 0 },
-                '& .MuiTableCell-root': { p: '6px', borderBottom: '1px solid', borderBottomColor: 'background.default' }
+                '& .MuiTableCell-root': {
+                  p: '6px',
+                  borderBottom: '1px solid',
+                  borderBottomColor: 'background.default',
+                  width: '16.67%'
+                }
               }}
             >
               <TableCell align='center'>