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),
},
titleComp: {
padding: theme.spacing(1),
marginLeft: theme.spacing(-1)
padding: theme.spacing(1, 1, 0, 1.5),
},
subtitleComp: {
padding: theme.spacing(1),
marginTop: theme.spacing(-2),
marginLeft: theme.spacing(-1),
padding: theme.spacing(0, 1, 0.5, 1.5),
display: "flex",
alignItems: "center",
},
titleContainer: {
border: "none",
@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
searchContainer: {
border: "none",
textAlign: "right",
display: "flex",
alignItems: "center",
},
mobileTitleBox: {
margin: theme.spacing(1),
@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
: {}),
}}
>
<Box component="span" sx={{ whiteSpace: "nowrap" }}>
{column.title} {showOrderIcon(column)}
<Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
<Box component="span">{column.title}</Box>
{showOrderIcon(column)}
</Box>
</Grid2>
);
@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
if (sortKey === orderBy) {
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 {
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;
@ -553,14 +563,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
<Box className={classes.tableContainer} component={Paper}>
{(title || setSearchText) && (
<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>
<Box sx={{ marginTop: -1 }}>
{renderTitle()}
{renderSubtitle()}
</Box>
{renderTitle()}
{renderSubtitle()}
</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>
{actions && actions}