Skip to content

fix: improve mobile responsiveness of schedule creation form (#88)#151

Open
darius-daniel wants to merge 1 commit into
vestflow-labs:mainfrom
darius-daniel:fix/issue-88-mobile-responsiveness
Open

fix: improve mobile responsiveness of schedule creation form (#88)#151
darius-daniel wants to merge 1 commit into
vestflow-labs:mainfrom
darius-daniel:fix/issue-88-mobile-responsiveness

Conversation

@darius-daniel

Copy link
Copy Markdown

Pull Request: Improve Mobile Responsiveness of Schedule Creation Form

Description

This PR addresses issue #88 by improving the mobile responsiveness of the multi-step vesting schedule creation form. The form now correctly reflows and scales on devices down to 375px (e.g., iPhone SE) without horizontal overflow or layout breakage.

Changes

Core Components

  • CreateForm.tsx:
    • Reduced card padding on mobile (p-4 sm:p-6) to maximize usable space.
    • Updated "Vesting Type" radio group to stack vertically on mobile and horizontally on desktop.
    • Added min-w-0 and max-width: 100% to all input fields to prevent container overflow.
    • Improved "Revocable" checkbox layout with better text wrapping and alignment.
    • Added break-words to SummaryItem values in the confirmation step to handle long strings.

Global Styles

  • globals.css:
    • Applied appearance-none to date and time inputs to fix browser-specific width issues on mobile.
    • Added global safety rules for the .input class to ensure consistent scaling.

Layout & Navigation

  • create/page.tsx and app/page.tsx:
    • Updated main content containers to use responsive horizontal padding (px-4 sm:px-6).

Developer Experience

  • WalletContext.tsx:
    • Added a development-only debug helper that allows bypassing the wallet connection check. This enables faster UI/UX testing of the form steps without requiring a live Freighter extension.

Verification Results

  • Responsiveness: Verified layout at 375px, 414px, and 768px breakpoints.
  • Build: Successfully ran npm run build with no regressions.
  • Functionality: Tested form step transitions and data persistence using the new debug mock wallet.

Closes #88

@drips-wave

drips-wave Bot commented Jun 2, 2026

Copy link
Copy Markdown

@darius-daniel Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@libby-coder

Copy link
Copy Markdown
Contributor

please resolve, so i can review

1 similar comment
@libby-coder

Copy link
Copy Markdown
Contributor

please resolve, so i can review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve mobile responsiveness of schedule creation form

2 participants