fix(formplayer): resolve double scrolling and improve navigation UX

[najuna-brian]

Fix: Resolve Double Scrolling, Improve Navigation UX, and Optimize Layout Spacing

Closes #149

Problem

The form player had several UX issues that affected usability on mobile devices:

1. Double Scrolling: Both the outer container and content area were scrollable, creating a confusing user experience
2. Navigation Visibility: Buttons and progress bar were not fully visible due to viewport and safe area issues
3. Excessive Side Margins: Form content had too much horizontal padding (20px + 2%), wasting valuable screen space on mobile
4. Inconsistent Validation Spacing: Error messages appeared at different distances from input fields depending on the input type

Solution

Refactored the layout system to follow Material-UI best practices and implemented mobile-first spacing improvements.

Changes

1. Viewport & Navigation Fixes (FormLayout.tsx, App.tsx)

2. Side Margin Reduction (App.tsx, index.css)

3. Validation Spacing Consistency (QuestionShell.tsx)

4. Updated build Assets

Testing

• ✅ Verified no double scrolling on mobile devices
• ✅ Confirmed navigation bar doesn't overlap form content
• ✅ Tested keyboard appearance/hiding behavior
• ✅ Validated safe area insets on devices with notches
• ✅ Verified responsive behavior across breakpoints (xs, sm, md)
• ✅ Confirmed reduced side margins provide better mobile experience
• ✅ Verified consistent validation message spacing across input types