[UI] Improve Academy Content Template Creator form responsiveness on mobile #298

Description

The Academy Content Template Creator form has several UI/UX and responsiveness issues on smaller screens.

After clicking the Create Academy Content button, a multi-step form opens. On mobile viewports, some elements overlap, buttons are clipped, and the navigation between form sections could be improved.

Issues Observed

1. Button Clipping and Overflow

   • The "Continue To Docs" button at the bottom of the form is partially clipped on mobile screens.
   • The Back and Continue buttons within individual form sections also need better spacing and alignment.

2. Recognition Section Overlapping

   • The "Create New Recognition" button overlaps with the recognition selection field.
   • Some controls and content in this section appear cramped or overflow horizontally.
   • The layout should adapt to smaller screens without overlapping elements.

3. Redundant Back Button in Basic Information

   • The first step (Basic Information) displays a Back button even though there is no previous step.
   • This button is unnecessary and should be hidden for the initial step, leaving only the Continue button.

4. Responsive Form Layout

   • Form fields, buttons, and step descriptions need appropriate spacing and alignment.
   • The form should remain usable without horizontal overflow or clipped content.

Steps to Reproduce

1. Open Meshery Academy.
2. Navigate to the Academy section.
3. Click the Create Academy Content button.
4. Observe the Basic Information section.
5. Navigate through the subsequent steps, particularly Content Access and Recognition.
6. Observe the button alignment, overlapping elements, and horizontal overflow on a mobile viewport.

Expected Behavior

• All buttons should remain completely visible within the form boundaries.
• Back and Continue buttons should have appropriate spacing and alignment.
• The Back button should not appear on the first step (Basic Information).
• Recognition selection fields and the "Create New Recognition" button should not overlap.
• Form elements should adapt to smaller screen widths without horizontal overflow.
• The overall multi-step form should provide a consistent and user-friendly experience across mobile, tablet, and desktop viewports.

Environment

• Viewport: 360 × 760
• Device: Samsung Galaxy S10 (emulated)
• Browser: Firefox

Screenshots

Attached screenshots demonstrate the overlapping elements, button clipping, and redundant navigation button.