Issue Summary

Mobile layout inconsistencies in API Keys settings page and dialog form. The mobile view lacks proper spacing and layout alignment compared to the desktop view, specifically affecting the "Add API key" button positioning and informational boxes spacing in the API key creation dialog.

Steps to Reproduce

1. Navigate to Settings → Developer → API Keys
2. Observe the mobile view layout (or resize browser to mobile width)
3. Click on "Add" button to open the API key creation dialog
4. Observe the spacing between informational boxes in the dialog

Actual Results

• What's happening right now that is different from what is expected

Expected Results

• This is an ideal result that the system should get after the tests are performed

Technical Details

• Root Cause:
  • SettingsHeader component used block layout on mobile instead of flex with justify-between
  • ApiKeyDialogForm used block gap-2 sm:flex which removed gap spacing on mobile
• Files Affected:
  • packages/features/settings/appDir/SettingsHeader.tsx
  • packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
• CSS Classes: Layout classes needed to be updated to use flex with proper responsive behavior

Evidence

Before Fix:

• Mobile view showed stacked layout without proper spacing
• "Add API key" button was centered instead of right-aligned
• Informational boxes in dialog had no spacing between them

After Fix:

• Mobile view now uses flex justify-between for consistent button positioning
• Dialog form uses flex flex-col gap-2 sm:flex-row for proper spacing on all screen sizes
• Layout is now consistent between mobile and desktop views

Testing:

• Verified layout works correctly on mobile viewport widths
• Confirmed desktop layout remains unchanged
• Tested responsive behavior across different screen sizes