fix(client): align the validation alert with the save button

Browser testing showed the alert stretching the full width of the save
bar while Save was pushed against the right edge, and the two sat on
different vertical centres.

The alert carried flexGrow: 1, so it consumed all the free space in the
row, plus mb: 2 and mr: 2, which offset it against a button that had
neither. The row itself set no alignItems, so the items aligned by
stretch rather than centre.

The row now centres its items and uses gap for spacing, and the alert
drops its sx entirely: growing was what stretched it, and the margins
are the gap's job. Measured: the alert sizes to its content (297px, was
1168px), 16px from Save, centres within 2px.

Removing the sx also clears two of the four pre-existing lint warnings
on this file.

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

client/src/Pages/Settings/index.tsx

@@ -1073,6 +1073,8 @@ export const SettingsPage = () => {
 				<Stack
 					direction="row"
 					justifyContent="flex-end"
+					alignItems="center"
+					gap={theme.spacing(LAYOUT.MD)}
 					sx={{
 						position: "sticky",
 						bottom: 0,
@@ -1082,10 +1084,7 @@ export const SettingsPage = () => {
 				>
 					{/* Validation Error Display */}
 					{Object.keys(form.formState.errors).length > 0 && (
-						<Alert
-							severity="error"
-							sx={{ mb: 2, flexGrow: 1, mr: 2 }}
-						>
+						<Alert severity="error">
 							<Typography
 								variant="body2"
 								sx={{ fontWeight: 600, mb: 1 }}