fix(client): match header button icons and toggle weight to the rest of the UI

Two mismatches in the monitor detail header:

- The action button icons rendered at the shared Icon default of 20px,
  while the sidebar clamps the same lucide icons to 16px in CSS. The
  buttons were therefore 25% larger than every other icon in the app,
  and taller than the cap height of the 13px label beside them. Now 16px
  at all eight call sites. Left at full opacity - the sidebar dims to
  0.81 because nav is recessive, but these are active controls.

- ToggleButton went to fontWeight 500 when selected while Button is a
  flat 400, so the time range group sat heavier than the button row
  above it. Weight now stays at 400 and the tinted fill plus text.primary
  ink carry the selected state; that is a 2.9x difference in ink against
  the unselected label, so selection is still obvious. It also stops the
  label reflowing as you switch range.

Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd

client/src/Components/inputs/ToggleButton.tsx

@@ -33,8 +33,11 @@ export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
 				},
 				"&.Mui-selected": {
 					backgroundColor: selectedBg,
+					// Weight stays at 400 so the group sits level with Button,
+					// which it is routinely placed beside. The fill and the
+					// darker ink carry the selected state instead - a weight
+					// change also reflows the label width as you switch.
 					color: theme.palette.text.primary,
-					fontWeight: 500,
 					"&:hover": {
 						backgroundColor: selectedHoverBg,
 					},

client/src/Components/monitors/HeaderMonitorControls.tsx

@@ -64,7 +64,12 @@ export const HeaderMonitorControls = ({
 					variant="contained"
 					color="secondary"
 					loading={isPosting}
-					startIcon={<Icon icon={Mail} />}
+					startIcon={
+						<Icon
+							icon={Mail}
+							size={16}
+						/>
+					}
 					onClick={async () => {
 						await post(`/notifications/test/all`, { monitorId: monitor.id });
 					}}
@@ -77,7 +82,12 @@ export const HeaderMonitorControls = ({
 				<Button
 					variant="contained"
 					color="secondary"
-					startIcon={<Icon icon={Bug} />}
+					startIcon={
+						<Icon
+							icon={Bug}
+							size={16}
+						/>
+					}
 					onClick={() => {
 						navigate(`/incidents/${monitor?.id}`);
 					}}
@@ -89,7 +99,19 @@ export const HeaderMonitorControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						startIcon={
+							monitor?.isActive ? (
+								<Icon
+									icon={Pause}
+									size={16}
+								/>
+							) : (
+								<Icon
+									icon={Play}
+									size={16}
+								/>
+							)
+						}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -102,7 +124,12 @@ export const HeaderMonitorControls = ({
 					<Button
 						variant="contained"
 						color="secondary"
-						startIcon={<Icon icon={Settings} />}
+						startIcon={
+							<Icon
+								icon={Settings}
+								size={16}
+							/>
+						}
 						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
 					>
 						{t("common.buttons.configure")}
@@ -149,7 +176,19 @@ export const HeaderDeleteControls = ({
 						variant="contained"
 						color="secondary"
 						loading={isPosting}
-						startIcon={monitor?.isActive ? <Icon icon={Pause} /> : <Icon icon={Play} />}
+						startIcon={
+							monitor?.isActive ? (
+								<Icon
+									icon={Pause}
+									size={16}
+								/>
+							) : (
+								<Icon
+									icon={Play}
+									size={16}
+								/>
+							)
+						}
 						onClick={async () => {
 							await post(`/monitors/pause/${monitor.id}`, {});
 							await refetch();
@@ -162,7 +201,12 @@ export const HeaderDeleteControls = ({
 					<Button
 						variant="contained"
 						color="error"
-						startIcon={<Icon icon={Trash} />}
+						startIcon={
+							<Icon
+								icon={Trash}
+								size={16}
+							/>
+						}
 						onClick={() => {
 							onDelete?.();
 						}}