Skip to content

Commit 0bd2c2c

Browse files
committed
fixed form layout
1 parent a3dad5a commit 0bd2c2c

File tree

2 files changed

+66
-53
lines changed

2 files changed

+66
-53
lines changed

site/src/components/Form/Form.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const FormSection: FC<
6464
description: string | JSX.Element
6565
classes?: {
6666
root?: string
67+
sectionInfo?: string
6768
infoTitle?: string
6869
}
6970
}
@@ -73,7 +74,12 @@ export const FormSection: FC<
7374

7475
return (
7576
<div className={combineClasses([styles.formSection, classes.root])}>
76-
<div className={styles.formSectionInfo}>
77+
<div
78+
className={combineClasses([
79+
classes.sectionInfo,
80+
styles.formSectionInfo,
81+
])}
82+
>
7783
<h2
7884
className={combineClasses([
7985
styles.formSectionInfoTitle,

site/src/pages/CreateTokenPage/CreateTokenForm.tsx

Lines changed: 59 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {
2121
import { FormikContextType } from "formik"
2222
import dayjs from "dayjs"
2323
import { useNavigate } from "react-router-dom"
24+
import { Stack } from "components/Stack/Stack"
2425

2526
interface CreateTokenFormProps {
2627
form: FormikContextType<CreateTokenData>
@@ -64,6 +65,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
6465
<FormSection
6566
title={t("createToken.nameSection.title")}
6667
description={t("createToken.nameSection.description")}
68+
classes={{ sectionInfo: styles.formSectionInfo }}
6769
>
6870
<FormFields>
6971
<TextField
@@ -72,6 +74,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
7274
required
7375
onChange={onChangeTrimmed(form, () => setFormError(undefined))}
7476
autoFocus
77+
fullWidth
7578
variant="outlined"
7679
/>
7780
</FormFields>
@@ -88,63 +91,67 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
8891
})
8992
: t("createToken.lifetimeSection.emptyDescription")
9093
}
94+
classes={{ sectionInfo: styles.formSectionInfo }}
9195
>
9296
<FormFields>
93-
<TextField
94-
select
95-
label={t("createToken.fields.lifetime")}
96-
required
97-
defaultValue={determineDefaultLtValue(maxTokenLifetime)}
98-
onChange={(event) => {
99-
void setLifetimeDays(event.target.value)
100-
}}
101-
InputLabelProps={{
102-
shrink: true,
103-
}}
104-
>
105-
{filterByMaxTokenLifetime(lifetimeDayPresets, maxTokenLifetime).map(
106-
(lt) => (
107-
<MenuItem key={lt.label} value={lt.value}>
108-
{lt.label}
109-
</MenuItem>
110-
),
111-
)}
112-
<MenuItem
113-
key={customLifetimeDay.label}
114-
value={customLifetimeDay.value}
115-
>
116-
{customLifetimeDay.label}
117-
</MenuItem>
118-
</TextField>
119-
</FormFields>
120-
<FormFields>
121-
{lifetimeDays === "custom" && (
97+
<Stack direction="row">
12298
<TextField
123-
type="date"
124-
label={t("createToken.lifetimeSection.expiresOn")}
125-
defaultValue={dayjs().add(expDays, "day").format("YYYY-MM-DD")}
99+
select
100+
label={t("createToken.fields.lifetime")}
101+
required
102+
defaultValue={determineDefaultLtValue(maxTokenLifetime)}
126103
onChange={(event) => {
127-
const lt = Math.ceil(
128-
dayjs(event.target.value).diff(dayjs(), "day", true),
129-
)
130-
setExpDays(lt)
131-
}}
132-
inputProps={{
133-
min: dayjs().add(1, "day").format("YYYY-MM-DD"),
134-
max: maxTokenLifetime
135-
? dayjs()
136-
.add(maxTokenLifetime / NANO_HOUR / 24, "day")
137-
.format("YYYY-MM-DD")
138-
: undefined,
139-
required: true,
104+
void setLifetimeDays(event.target.value)
140105
}}
106+
fullWidth
141107
InputLabelProps={{
142108
shrink: true,
143-
required: true,
144109
}}
145-
className={styles.expField}
146-
/>
147-
)}
110+
>
111+
{filterByMaxTokenLifetime(
112+
lifetimeDayPresets,
113+
maxTokenLifetime,
114+
).map((lt) => (
115+
<MenuItem key={lt.label} value={lt.value}>
116+
{lt.label}
117+
</MenuItem>
118+
))}
119+
<MenuItem
120+
key={customLifetimeDay.label}
121+
value={customLifetimeDay.value}
122+
>
123+
{customLifetimeDay.label}
124+
</MenuItem>
125+
</TextField>
126+
127+
{lifetimeDays === "custom" && (
128+
<TextField
129+
type="date"
130+
label={t("createToken.lifetimeSection.expiresOn")}
131+
defaultValue={dayjs().add(expDays, "day").format("YYYY-MM-DD")}
132+
onChange={(event) => {
133+
const lt = Math.ceil(
134+
dayjs(event.target.value).diff(dayjs(), "day", true),
135+
)
136+
setExpDays(lt)
137+
}}
138+
inputProps={{
139+
min: dayjs().add(1, "day").format("YYYY-MM-DD"),
140+
max: maxTokenLifetime
141+
? dayjs()
142+
.add(maxTokenLifetime / NANO_HOUR / 24, "day")
143+
.format("YYYY-MM-DD")
144+
: undefined,
145+
required: true,
146+
}}
147+
fullWidth
148+
InputLabelProps={{
149+
shrink: true,
150+
required: true,
151+
}}
152+
/>
153+
)}
154+
</Stack>
148155
</FormFields>
149156
</FormSection>
150157
<FormFooter
@@ -160,8 +167,8 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
160167
)
161168
}
162169

163-
const useStyles = makeStyles((theme) => ({
164-
expField: {
165-
marginLeft: theme.spacing(2),
170+
const useStyles = makeStyles(() => ({
171+
formSectionInfo: {
172+
minWidth: "300px",
166173
},
167174
}))

0 commit comments

Comments
 (0)