fix(HAI-048): fix checkbox input styling in Settings modal

- Exclude checkbox inputs from full-width text input styles using :not([type="checkbox"])
- Add dedicated checkbox styling with proper size, accent color, and cursor
- Add test verifying groupOverlappingFiles input renders as a checkbox
This commit is contained in:
Dustin Byrne
2026-03-25 23:20:56 -04:00
parent 539c1c6af9
commit d557e90a5b
2 changed files with 19 additions and 2 deletions

View File

@@ -86,6 +86,15 @@ describe("SettingsModal", () => {
expect(screen.getByText("Auto-merge completed tasks")).toBeTruthy();
});
it("groupOverlappingFiles input has type checkbox", async () => {
render(<SettingsModal onClose={onClose} addToast={addToast} />);
await waitFor(() => expect(fetchSettings).toHaveBeenCalled());
const checkbox = screen.getByLabelText("Serialize tasks with overlapping files");
expect(checkbox).toBeTruthy();
expect(checkbox.getAttribute("type")).toBe("checkbox");
});
it("save button calls updateSettings with form data", async () => {
render(<SettingsModal onClose={onClose} addToast={addToast} />);
await waitFor(() => expect(fetchSettings).toHaveBeenCalled());

View File

@@ -353,7 +353,7 @@ html, body {
}
.optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-group input,
.form-group input:not([type="checkbox"]),
.form-group textarea {
width: 100%;
padding: 8px 12px;
@@ -366,10 +366,18 @@ html, body {
outline: none;
transition: border-color 0.15s;
}
.form-group input:focus,
.form-group input:not([type="checkbox"]):focus,
.form-group textarea:focus {
border-color: var(--todo);
}
.form-group input[type="checkbox"] {
width: 16px;
height: 16px;
padding: 0;
margin: 0;
accent-color: var(--todo);
cursor: pointer;
}
.form-group textarea { resize: vertical; }
/* === Settings Layout === */