made configuration labels in-line

[MrAtomicBombHead]

Moved the labels for configuration windows from above the input box to the left of it so they are in-line.

[AlexKempen]

Looks pretty good, some minor tweaks/enhancements

[AlexKempen]

I actually think the existing checkbox implementation was pretty good and is fairly representative of what we should be aiming for in terms of styling

[AlexKempen]

I think removing minWidth to more closely match the existing inputs would be good

[AlexKempen]

If you add component="label" and htmlFor={parameter.id}, you can link the text to the select so clicking the text also activates the select (this also applies to the other components)

[AlexKempen]

Looks good! I did have Claude factor out a separate InputLabel component to capture the shared code between each of the *Input components but that wasn't really a functional change.

/**
 * The height of a default sized Mantine input.
 */
const INPUT_HEIGHT = "36px";

interface InputLabelProps {
    label: string;
    /**
     * The id of the input the label describes.
     */
    htmlFor: string;
    children: ReactNode;
}

/**
 * A label displayed to the left of a parameter input.
 *
 * The label is given the height of an input so it stays aligned with the input
 * itself rather than drifting when the input grows to show an error message.
 */
function InputLabel(props: InputLabelProps) {
    const { label, htmlFor, children } = props;
    return (
        <Group gap="sm" align="flex-start" mt="sm">
            <Text
                size="sm"
                style={{
                    display: "flex",
                    alignItems: "center",
                    height: INPUT_HEIGHT,
                    cursor: "pointer"
                }}
                component="label"
                htmlFor={htmlFor}
            >
                {label}
            </Text>
            {children}
        </Group>
    );
}