fix(ui): stop checkboxes stretching to the full width of a form field

This commit is contained in:
yatishgoel 2026-09-01 17:05:08 +05:30
parent ec3f8183c3
commit 054acb2223
3 changed files with 18 additions and 3 deletions

View file

@ -294,6 +294,21 @@ describe("CreateUserButton", () => {
});
});
it("lays the send invitation email checkbox out beside its label", async () => {
const user = userEvent.setup({ pointerEventsCheck: PointerEventsCheckLevel.Never });
renderWithProviders(<CreateUserButton {...defaultProps} />);
await waitFor(() => {
expect(screen.getByRole("button", { name: /\+ invite user/i })).toBeInTheDocument();
});
await user.click(screen.getByRole("button", { name: /\+ invite user/i }));
const dialog = screen.getByRole("dialog", { name: /invite user/i });
const checkbox = within(dialog).getByRole("checkbox");
expect(checkbox.closest('[data-slot="field"]')).toHaveAttribute("data-orientation", "horizontal");
});
describe("organizations", () => {
it("should send organizations list in POST body when organizations are selected", async () => {
const { useOrganizations } = await import("@/app/(dashboard)/hooks/organizations/useOrganizations");

View file

@ -270,7 +270,7 @@ export const CreateUserButton: React.FC<CreateuserProps> = ({
);
const sendInviteEmailField = (
<FormField control={form.control} name="send_invite_email" label="Send invitation email">
<FormField control={form.control} name="send_invite_email" label="Send invitation email" orientation="horizontal">
{({ id, value, onChange, onBlur }) => (
<Checkbox id={id} checked={value} onCheckedChange={onChange} onBlur={onBlur} />
)}

View file

@ -303,7 +303,7 @@ const SSOProviderField = ({ field }: { field: SSOProviderConfig["fields"][number
if (field.type === "checkbox") {
return (
<FormField control={control} name={field.name} label={field.label}>
<FormField control={control} name={field.name} label={field.label} orientation="horizontal">
{({ value, onChange, onBlur, id, ...rest }) => (
<Checkbox
id={id}
@ -413,7 +413,7 @@ export const MappingToggleField = ({
const { control } = useFormContext<SSOSettingsFormValues>();
return (
<FormField control={control} name={name} label={label}>
<FormField control={control} name={name} label={label} orientation="horizontal">
{({ value, onChange, onBlur, id, ...rest }) => (
<Checkbox
id={id}