feat(formplayer): improve UI spacing and error button visibility

[IamLRBA]

Pull Request Title

Improve UI Spacing and Error Button Visibility

Description

This PR implements UI improvements to maximize usable screen space by reducing unnecessary margins, borders, and padding throughout the Formplayer interface. Additionally, it enhances the finalization page by converting error list items to clearly visible, clickable buttons.

Key Changes:

• Reduced padding in main app container (12px → 4px)
• Reduced form screen padding and margins (2vh → 0.5vh, 15px → 8px)
• Reduced horizontal padding (1% → 0.5%)
• Reduced navigation bar padding and removed top border
• Reduced content bottom padding (120px → 80px)
• Reduced React Native modal header padding and close button padding
• Converted error list items to styled buttons for better visibility and UX

Type of Change

• Bug Fix
• New Feature / Enhancement
• Refactor / Code Cleanup
• Documentation Update
• Maintenance / Chore
• Other (please specify):

---

Component(s) Affected

• formulus (React Native mobile app)
• formulus-formplayer (React web app)
• synkronus (Go backend server)
• synkronus-cli (Command-line utility)
• Documentation
• DevOps / CI/CD
• Other:

---

Related Issue(s)

Closes/Fixes/Resolves: Closes #151

---

Testing

• Unit tests added/updated
• Integration tests added/updated
• Manually tested
• Tested on multiple platforms (if applicable)
• Not applicable

Testing Notes:

• Tested in browser development environment
• Verified responsive behavior across different screen sizes
• Confirmed error button clickability and navigation functionality
• Tested form layout with reduced spacing

New Error Buttons:

---

Breaking Changes

• This PR introduces breaking changes
• This PR does NOT introduce breaking changes

If breaking changes, please describe migration steps:

---

Documentation Updates

• Documentation has been updated
• Documentation update is not required

---

Checklist

• Code follows project style guidelines
• All existing tests pass
• New tests added for new functionality
• PR title follows Conventional Commits format

---

Thank you for contributing to Open Data Ensemble (ODE)!

[najuna-brian]

Top Padding Too Small?
On my mobile, the reduction of padding-top from 2vh to 0.5vh in index.css (line 20) is causing the first form entries (consent questions, etc.) to be cut off at the top. May be we can increase this to at least 1.5vh or 2vh to ensure content is fully visible?

Progress Bar Positioning:
The design feedback requested moving the progress bar "all the way up" to maximize vertical space. This hasn't been addressed 😄 We could consider reducing/removing this margin and adjusting header padding in FormLayout.tsx to move it higher as @r0ssing showed in the screenshot

Could we have something like this?

• index.css line 20: Change padding-top: 0.5vh; → padding-top: 1.5vh; (or 2vh)
• FormProgressBar.tsx line 169: Consider reducing mb: 2 to mb: 0.5 or mb: 1
• App.tsx line 653: Consider if padding: '4px' is too tight - maybe 8px as a middle ground

Thoughts?

The close button margin reductions look good
The finalize screen looks great 🎉

[r0ssing]

Looks good! Perhaps if we could win some space by letting the "Please fix" text simply replace the "Review and Finalize"-title? (we might not need both). Also - do we know how wide those pill buttons can become? I am thinking it would maybe look nice if we could give them a fixed width instead? What do we think?

[IamLRBA]

Thanks for testing this Brian.
I will make the changes accordingly.

[IamLRBA]

Looks good! Perhaps if we could win some space by letting the "Please fix" text simply replace the "Review and Finalize"-title? (we might not need both).

Thanks @r0ssing,
I understand the "Review and Finalize" is the main heading for this page and evidently, the "Please fix the following errors before finalizing:" text only appears if there are errors.
But we have a "Form Summary" heading bellow the errors which could in turn act as our main heading with the subtext "Review all your entered data below. Click on any field to edit it.".
Your point is valid and I second it.

[IamLRBA]

Also - do we know how wide those pill buttons can become? I am thinking it would maybe look nice if we could give them a fixed width instead? What do we think?

This was me doing the opposite of what needed to be done in doubts of it being what is actually required!
Initially, as per the pill button rules, the pills all have the same length that span just like the form summary. And their widths can widen according to the length of the error texts.

Since, that is clearly the better Idea, I will work on reverting to that instead. 👍🏽👍🏽

[IamLRBA]

@r0ssing I reorganized the headings to win some space. Error buttons now have uniform width for better visual consistency. The "Form Summary" section is now styled as the main heading with bold typography.

How's it looking?

[Bahati308]

Thanks @IamLRBA, this is dope!