mirror of
https://github.com/bunny-lab-io/Borealis.git
synced 2025-12-15 16:55:48 -07:00
Fixed Inconsistent Alignment of Tabbed Subsection Titles in Job Scheduler
This commit is contained in:
@@ -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,9 +2815,9 @@ 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
|
||||||
select
|
select
|
||||||
size="small"
|
size="small"
|
||||||
@@ -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 && (
|
||||||
|
|||||||
Reference in New Issue
Block a user