[UI] Fix Back button overlap on mobile exam details page #296

Description

The exam details page in Meshery Academy has a responsive UI issue on smaller screens.

On mobile viewports, the floating circular Back button overlaps the exam heading and surrounding content, making the page look cluttered and affecting readability.

The layout works correctly on desktop screens, but the Back button positioning does not adapt properly to smaller viewport sizes.

Steps to Reproduce

1. Open Meshery Academy.
2. Navigate to any certification exam details page (e.g., Meshery CLI Contributor Exam).
3. Resize the browser to a mobile viewport (e.g., 360 × 760).
4. Observe the positioning of the floating Back button relative to the exam heading.

Actual Behavior

• The floating Back button overlaps the exam heading on mobile screens.
• The button occupies space over the page content.
• The layout becomes visually cluttered on smaller screens.

Expected Behavior

• The Back button should have appropriate positioning on mobile devices.
• It should not overlap the heading, navigation tabs, or other page content.
• The layout should remain clean and usable across different viewport sizes.

Environment

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

Screenshots

Attached screenshots show the difference between mobile and desktop layouts.