From b24e42e51691eef3e8ca3a0f31e86e0d007f3f1c Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Fri, 28 Aug 2026 23:06:27 -0400 Subject: [PATCH] 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 | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/client/src/Pages/Settings/index.tsx b/client/src/Pages/Settings/index.tsx index 6230e0285..c5cd8f7c2 100644 --- a/client/src/Pages/Settings/index.tsx +++ b/client/src/Pages/Settings/index.tsx @@ -1073,6 +1073,8 @@ export const SettingsPage = () => { { > {/* Validation Error Display */} {Object.keys(form.formState.errors).length > 0 && ( - +