Fix toggle button alignment (#22464)

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>}

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" : "")};
 `;