Fixed Inconsistent Alignment of Tabbed Subsection Titles in Job Scheduler

This commit is contained in:
2025-11-22 02:16:02 -07:00
parent 3121d31aa2
commit 2c903d4dc1

View File

@@ -329,6 +329,15 @@ const GLASS_PANEL_BASE_SX = {
p: { xs: 2, md: 3 }, p: { xs: 2, md: 3 },
}; };
const TAB_SECTION_SX = {
width: "100%",
display: "flex",
flexDirection: "column",
gap: 1.5,
px: { xs: 1.5, md: 2 },
py: { xs: 1.25, md: 1.75 },
};
const PRIMARY_CTA_SX = { const PRIMARY_CTA_SX = {
borderRadius: 999, borderRadius: 999,
px: 3, px: 3,
@@ -547,23 +556,23 @@ function StatusNode({ data }) {
); );
} }
function SectionHeader({ title, action }) { function SectionHeader({ title, action, sx }) {
return ( return (
<Box <Box
sx={{ sx={{
mt: 1,
mb: 1.5, mb: 1.5,
display: "flex", display: "flex",
alignItems: "center", alignItems: action ? "flex-start" : "center",
justifyContent: "space-between", justifyContent: "space-between",
gap: 2, gap: 2,
...sx,
}} }}
> >
<Typography <Typography
variant="subtitle2" variant="subtitle2"
sx={{ sx={{
color: MAGIC_UI.textBright, color: MAGIC_UI.textBright,
fontWeight: 600, fontWeight: 400,
letterSpacing: 0.4, letterSpacing: 0.4,
textTransform: "uppercase", textTransform: "uppercase",
fontSize: 13, fontSize: 13,
@@ -2709,7 +2718,7 @@ const heroTiles = useMemo(() => {
<Box sx={{ flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 3 }}> <Box sx={{ flexGrow: 1, minHeight: 0, display: "flex", flexDirection: "column", gap: 3 }}>
{tab === 0 && ( {tab === 0 && (
<GlassPanel> <Box sx={TAB_SECTION_SX}>
<SectionHeader title="Job Name" /> <SectionHeader title="Job Name" />
<TextField <TextField
fullWidth fullWidth
@@ -2722,11 +2731,11 @@ const heroTiles = useMemo(() => {
error={jobName.trim().length === 0} error={jobName.trim().length === 0}
helperText={jobName.trim().length === 0 ? "Job name is required" : ""} helperText={jobName.trim().length === 0 ? "Job name is required" : ""}
/> />
</GlassPanel> </Box>
)} )}
{tab === 1 && ( {tab === 1 && (
<GlassPanel> <Box sx={TAB_SECTION_SX}>
<SectionHeader <SectionHeader
title="Assemblies" title="Assemblies"
action={ action={
@@ -2760,11 +2769,11 @@ const heroTiles = useMemo(() => {
At least one assembly is required. At least one assembly is required.
</Typography> </Typography>
)} )}
</GlassPanel> </Box>
)} )}
{tab === 2 && ( {tab === 2 && (
<Box sx={{ display: "flex", flexDirection: "column", gap: 1.5 }}> <Box sx={TAB_SECTION_SX}>
<SectionHeader <SectionHeader
title="Targets" title="Targets"
action={ action={
@@ -2806,7 +2815,7 @@ const heroTiles = useMemo(() => {
)} )}
{tab === 3 && ( {tab === 3 && (
<GlassPanel> <Box sx={TAB_SECTION_SX}>
<SectionHeader title="Schedule" /> <SectionHeader title="Schedule" />
<Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}> <Box sx={{ display: "flex", gap: 2, flexWrap: "wrap" }}>
<TextField <TextField
@@ -2885,11 +2894,11 @@ const heroTiles = useMemo(() => {
<MenuItem value="2d">2 Days</MenuItem> <MenuItem value="2d">2 Days</MenuItem>
<MenuItem value="3d">3 Days</MenuItem> <MenuItem value="3d">3 Days</MenuItem>
</TextField> </TextField>
</GlassPanel> </Box>
)} )}
{tab === 4 && ( {tab === 4 && (
<GlassPanel> <Box sx={TAB_SECTION_SX}>
<SectionHeader title="Execution Context" /> <SectionHeader title="Execution Context" />
<TextField <TextField
select select
@@ -2976,7 +2985,7 @@ const heroTiles = useMemo(() => {
)} )}
</Box> </Box>
)} )}
</GlassPanel> </Box>
)} )}
{editing && tab === historyTabIndex && ( {editing && tab === historyTabIndex && (