fix: Navigation button overlap and keyboard layout issues

[Bahati308]

Pull Request Title

fix(formplayer): fix navigation button overlap and mobile keyboard layout issues

Type of Change

• Bug Fix
• New Feature / Enhancement
• Refactor / Code Cleanup
• Documentation Update
• Maintenance / Chore / Dependency Update
• CI/CD or Build System Update
• Security Fix
• Style / Formatting (no logic changes)
• Performance Improvement
• Test Addition / Update
• Revert
• 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 (CI/CD Documentation)
• Dependencies / Build System
• Other:

---

Related Issue(s)

Closes/Fixes/Resolves:

Related: Closes #7

---

Description

Summary

Fixed navigation button overlap and mobile keyboard layout issues by implementing a sticky bottom navigation layout with proper scrollable content area.

Changes Made

• Created new FormLayout.tsx component with sticky navigation and scrollable content area
• Refactored SwipeLayoutRenderer.tsx to use new FormLayout component instead of absolute-positioned buttons
• Updated App.tsx to use dynamic viewport height (100dvh) instead of 100vh for mobile keyboard support
• Updated index.css to remove fixed height constraints from .swipelayout_screen class

---

Rationale / Context

Problem:

Previous/Next navigation buttons were absolutely positioned and floated over form content, blocking form fields. On mobile devices, when the on-screen keyboard appeared, the layout broke and users couldn't scroll to some inputs. The fixed viewport height (100vh) didn't adapt when the keyboard appeared.

Solution:

Implemented a robust MUI-based layout architecture with:

• Sticky bottom navigation bar that never overlaps content
• Scrollable content area with proper bottom padding (120px) to ensure inputs are never hidden
• Dynamic viewport height (100dvh) that adapts when mobile keyboard appears/disappears
• Proper flex layout structure separating header, content, and navigation areas

---

Testing Instructions

Prerequisites

• Android device or emulator with adb access
• Built formplayer assets in formulus/android/app/src/main/assets/formplayer_dist/

Expected Behavior

• Navigation buttons remain visible at bottom without overlapping form content
• When keyboard appears on mobile, layout adapts correctly
• All form fields remain accessible via scrolling
• Progress bar and percentage indicator have reduced spacing
• Layout works consistently across all devices and orientations

Test Coverage

• Unit tests added/updated
• Integration tests added/updated
• End-to-end tests added/updated
• Manually tested on device(s) / browser(s)
• Tested on multiple platforms (ADB/Android studio/Web)
• Tested with different data sets
• Not applicable

Test Results

Manually tested on Android device. Navigation buttons no longer overlap content, and mobile keyboard layout works correctly.

---

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
• Documentation update will follow in a separate PR

Files Updated:

New Documentation:

---

Screenshots / Videos

Before

Navigation buttons floated over form content using absolute positioning. On mobile, keyboard appearance broke the layout.

After

Navigation buttons are in a sticky bottom bar that never overlaps content. Layout adapts correctly when keyboard appears.

---

Screen.Recording.2025-12-10.at.15.01.49.mov

---

Performance Impact

• Performance improvement
• No performance impact
• Performance regression (explain below)

Details:

---

Security Considerations

• Security improvement
• Security fix
• No security impact

Details:

---

Checklist

Code Quality

• Code follows project style guidelines
• Code is self-documenting with clear variable/function names
• Comments added for complex logic
• No hardcoded values or magic numbers
• Error handling is appropriate

Testing

• All existing tests pass
• New tests added for new functionality
• Tests updated for changed functionality
• Manual testing completed
• Edge cases considered and tested

Linting & Formatting

• Linting passes (npm run lint / go fmt / etc.)
• Code formatted according to project standards
• No console.log statements left in code
• No commented-out code blocks
• No unused imports or variables

Git & PR Standards

• PR title follows Conventional Commits format
• Commit messages follow Conventional Commits format
• Branch naming follows project conventions
• Branch is up to date with main (or target branch)
• No merge conflicts
• Commits are logically organized
• All relevant labels added

Documentation

• README updated (if applicable)
• Component-specific READMEs updated:
  • formulus/README.md
  • formulus-formplayer/README.md
  • synkronus/README.md
  • synkronus-cli/README.md
• Code comments added/updated
• API documentation updated (if applicable)
• RELEASE.md updated (if applicable)
• Migration guide added (for breaking changes)

Review Readiness

• PR description is complete and clear
• All sections above are filled out
• Follows Contributing Guide standards
• Follows Code of Conduct
• Ready for review

---

Additional Notes

The FormLayout component is designed to be reusable for other form layouts in the future. It follows MUI best practices and provides a clean, maintainable solution for form navigation.

---

Reviewer Notes

Suggested Reviewers:

Priority:

• Low
• Medium
• High
• Critical

[r0ssing]

Thanks! This is great 👍
I really like that you refactored it to use more standards MUI components..

[IamLRBA]

Looks good, video was a great addition too!
I was wondering if on the last page, the single "Previous" button would be entered and I saw It is.
That's awesome work @Bahati308