diff --git a/frontend/src/metabase/components/form/FormField.jsx b/frontend/src/metabase/components/form/FormField.jsx index b2991a05b6e98ae204c72e8093ae2065ee4e5723..d72130c9045a7209482936f6060bfa85ced5890b 100644 --- a/frontend/src/metabase/components/form/FormField.jsx +++ b/frontend/src/metabase/components/form/FormField.jsx @@ -76,6 +76,7 @@ function FormField(props) { }; const formFieldId = `formField-${name.replace(ALL_DOT_CHARS, "-")}`; + const isToggle = formField?.type === "boolean"; if (!visited || active) { // if the field hasn't been visited or is currently active then don't show the error @@ -98,6 +99,7 @@ function FormField(props) { id={`${name}-label`} htmlFor={name} horizontal={horizontal} + standAlone={isToggle && align === "right" && !description} > {title} {error && <span className="text-error">: {error}</span>} diff --git a/frontend/src/metabase/components/form/FormField.styled.jsx b/frontend/src/metabase/components/form/FormField.styled.jsx index 31516a432e5647cdf5ccd454605658ec749f1c76..a8bc2f1bcbb866de64ed6de7ebd2fbd5383e72fc 100644 --- a/frontend/src/metabase/components/form/FormField.styled.jsx +++ b/frontend/src/metabase/components/form/FormField.styled.jsx @@ -17,6 +17,11 @@ export const Label = styled.label` css` margin-right: auto; `} + ${props => + props.standAlone && + css` + margin-top: 0.8em; + `} `; Label.defaultProps = { className: "Form-label" }; @@ -38,6 +43,7 @@ export const InfoLabel = styled.span` `; export const FieldContainer = styled.div` + width: 100%; margin-right: ${props => (props.horizontal ? "1rem" : "")}; margin-left: ${props => (props.align === "left" ? "0.5rem" : "")}; `;