From 9cee2eebd0c80d478799a1cfb74c8228f78f8cbe Mon Sep 17 00:00:00 2001 From: harsh-aghara Date: Fri, 22 May 2026 23:28:42 +0530 Subject: [PATCH] fix(ui): add missing indeterminate icon to Checkbox component The custom Checkbox used Lucide Square/SquareCheck for unchecked/checked states but had no indeterminateIcon, so MUI fell back to its default 24px Material icon. This caused a visible size mismatch and row height jitter in the bulk-select header of monitor tables. Add SquareMinus from lucide-react at the same size (16px) and strokeWidth (1.5) as the existing icons, and extend the checked color rule to also cover the indeterminate state. --- client/src/Components/inputs/Checkbox.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/Components/inputs/Checkbox.tsx b/client/src/Components/inputs/Checkbox.tsx index 195a796dd..f86d0d1fe 100644 --- a/client/src/Components/inputs/Checkbox.tsx +++ b/client/src/Components/inputs/Checkbox.tsx @@ -1,7 +1,7 @@ import { forwardRef } from "react"; import Checkbox from "@mui/material/Checkbox"; import type { CheckboxProps } from "@mui/material/Checkbox"; -import { Square, SquareCheck } from "lucide-react"; +import { Square, SquareCheck, SquareMinus } from "lucide-react"; import { useTheme } from "@mui/material/styles"; type CheckboxInputProps = CheckboxProps & { @@ -34,9 +34,15 @@ export const CheckboxInput = forwardRef( strokeWidth={1.5} /> } + indeterminateIcon={ + + } sx={{ color: theme.palette.text.secondary, - "&.Mui-checked": { + "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: theme.palette.primary.main, }, "&:hover": { backgroundColor: "transparent" },