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:
@@ -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());
|
||||
|
||||
@@ -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 === */
|
||||
|
||||
Reference in New Issue
Block a user