[UI] Improve Exam Details section responsiveness on mobile viewports #297

Description

The Exam Details page in Meshery Academy has some layout and spacing inconsistencies on smaller screens.

While the page looks good on desktop, certain sections appear cramped on mobile devices, affecting readability and the overall user experience.

Issues Observed

• Content Spacing: The exam heading, descriptions, and surrounding content have limited spacing on smaller screens.
• Resource Links: Longer resource link titles wrap awkwardly, making the list harder to read.
• Exam Details Section: The five exam statistics (Total Questions, Attempts Made, Pass Percentage, Time Limit, and Status) are squeezed into a single row, making them difficult to read on mobile screens.
• Action Buttons: The "Return to Overview" and "Start Test" buttons need better spacing and alignment to ensure comfortable interaction on smaller screens.

Steps to Reproduce

1. Open Meshery Academy.
2. Navigate to Certifications.
3. Open a certification exam (e.g., Meshery CLI Contributor Exam).
4. Resize the browser to a mobile viewport (e.g., 360 × 760).
5. Observe the content spacing, resource links, Exam Details section, and action buttons.

Expected Behavior

• Content should have appropriate spacing and padding on smaller screens.
• Resource links should wrap naturally without compromising readability.
• Exam statistics should use a responsive layout (e.g., a two-column grid) instead of being squeezed into a single row.
• Action buttons should remain properly spaced, aligned, and accessible.
• The overall page should provide a consistent and comfortable experience across mobile, tablet, and desktop viewports.

Environment

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

Screenshots

Attached screenshots show the mobile layout issues alongside the expected desktop layout.