brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed some placement stuff

Browse source
This commit is contained in:
Carter 2026-03-16 11:30:29 -06:00
parent a2ac900f3e
commit 843e3a792e
1 changed files with 28 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

43
src/common/ResponsiveTable.tsx
View file

@ -28,13 +28,12 @@ const useStyles = makeStyles((theme: Theme) => {
marginTop: theme.spacing(-2), marginTop: theme.spacing(-2),
}, },
titleComp: { titleComp: {
padding: theme.spacing(1), padding: theme.spacing(1, 1, 0, 1.5),
marginLeft: theme.spacing(-1)
}, },
subtitleComp: { subtitleComp: {
padding: theme.spacing(1), padding: theme.spacing(0, 1, 0.5, 1.5),
marginTop: theme.spacing(-2), display: "flex",
marginLeft: theme.spacing(-1), alignItems: "center",
}, },
titleContainer: { titleContainer: {
border: "none", border: "none",
@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
searchContainer: { searchContainer: {
border: "none", border: "none",
textAlign: "right", textAlign: "right",
display: "flex",
alignItems: "center",
}, },
mobileTitleBox: { mobileTitleBox: {
margin: theme.spacing(1), margin: theme.spacing(1),
@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
: {}), : {}),
}} }}
> >
<Box component="span" sx={{ whiteSpace: "nowrap" }}> <Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
{column.title} {showOrderIcon(column)} <Box component="span">{column.title}</Box>
{showOrderIcon(column)}
</Box> </Box>
</Grid2> </Grid2>
); );
@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase() const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
if (sortKey === orderBy) { if (sortKey === orderBy) {
if (order === "asc") { if (order === "asc") {
return <ArrowDownward fontSize="small" sx={{ marginLeft: 1 }} /> return (
<Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
<ArrowDownward fontSize="small" />
</Box>
)
} else { } else {
return <ArrowUpward fontSize="small" sx={{ marginLeft: 1 }} /> return (
<Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
<ArrowUpward fontSize="small" />
</Box>
)
} }
} }
return null; return null;
@ -553,14 +563,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<Box className={classes.tableContainer} component={Paper}> <Box className={classes.tableContainer} component={Paper}>
{(title || setSearchText) && ( {(title || setSearchText) && (
<Box> <Box>
<Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}> <Grid2
container
justifyContent="space-between"
alignItems="center"
sx={{ px: 1.5, pt: 1, pb: 0.5 }}
>
<Grid2> <Grid2>
<Box sx={{ marginTop: -1 }}> {renderTitle()}
{renderTitle()} {renderSubtitle()}
{renderSubtitle()}
</Box>
</Grid2> </Grid2>
<Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}> <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end", mt: -1 }}>
<Grid2 container alignItems="center" spacing={1} wrap="nowrap"> <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
<Grid2> <Grid2>
{actions && actions} {actions && actions}