feat: implement ModalFooter component for consistent modal action layout

apps/backoffice/src/app/features/vessel-registration/pages/VesselRegistrationFormBuilderPage.tsx

@@ -30,7 +30,7 @@ import {
   IconSettings,
   IconTrash,
 } from '@tabler/icons-react';
-import { notify } from '@ema-platform/ui';
+import { notify, ModalFooter } from '@ema-platform/ui';
 
 // ---------------------------------------------------------------------------
 // Types
@@ -495,12 +495,12 @@ export function VesselRegistrationFormBuilderPage() {
             onChange={(e) => setDraftRequired(e.currentTarget.checked)}
           />
           <Divider />
-          <Group justify="flex-end">
+          <ModalFooter>
             <Button variant="default" onClick={() => setDrawerOpen(false)}>Cancel</Button>
             <Button color="teal" onClick={saveField}>
               {isNew ? 'Add Field' : 'Save Changes'}
             </Button>
-          </Group>
+          </ModalFooter>
         </Stack>
       </Drawer>
 
@@ -516,10 +516,10 @@ export function VesselRegistrationFormBuilderPage() {
             Are you sure you want to remove <strong>{deleteTarget?.label}</strong> from the form?
             This cannot be undone.
           </Text>
-          <Group justify="flex-end">
+          <ModalFooter>
             <Button variant="default" onClick={() => setDeleteTarget(null)}>Cancel</Button>
             <Button color="red" onClick={confirmDelete}>Delete Field</Button>
-          </Group>
+          </ModalFooter>
         </Stack>
       </Modal>
     </Stack>