fix send-input spacing and move selected destination#1073
Open
gudnuf wants to merge 7 commits into
Open
Conversation
The amount and destination now live in the same fixed-height (h-[124px]) block as receive/buy, instead of stacking under an outer wrapper with gap-4. The destination chip tucks tight below the amount when set, and the account selector position stays constant regardless of destination state.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
…pad pb The destination chip was overflowing the 124px amount block on small screens, painting over the account selector. Pull the chip tight against the converted-money switcher with -mt-2 so it fits exactly within the box, and zero the PageFooter mobile bottom padding to give 4-8px of breathing room between destination and selector via the justify-between redistribution.
Previously the destination chip lived inside the 124px amount block, which forced layout compromises (overlap with selector, dead space, shifts). Move it to the action row instead: when a destination is picked, the Paste/Scan/AtSign icons are replaced by a chip showing the destination with an X to clear. Hitting X restores the icons. This keeps the amount + account selector spacing identical to the receive and buy pages, and the chip's col-span-2 grid cell has enough width for the truncated bolt11 display.
The destination chip in the action row has enough width for ~24 monospace characters at text-sm; the previous 6+...+4 only used 13. Bump to 12+...+8 so the user can recognize more of the invoice at a glance.
gudnuf
changed the title
gudnuf
changed the title
There was a problem hiding this comment.
Pull request overview
This PR adjusts the send input layout to remove unused vertical spacing and show the selected destination in the lower action area.
Changes:
- Removed the always-rendered destination spacer below the amount display.
- Replaced the paste/scan/select actions with a selected-destination chip when a destination is chosen.
- Expanded the shortened BOLT11 destination display.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
app/features/send/send-input.tsx |
Updates send screen layout and selected destination presentation. |
app/features/send/resolve-destination.ts |
Changes BOLT11 invoice display truncation length. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| </div> | ||
| <div /> {/* spacer */} | ||
| {destinationDisplay ? ( | ||
| <div className="col-span-2 flex h-10 items-center justify-between gap-2 rounded-lg border border-primary bg-background px-3 text-sm"> |
| ) : ( | ||
| <> | ||
| <div className="flex items-center justify-start gap-4"> | ||
| <button type="button" onClick={handlePaste}> |
| <LinkWithViewTransition | ||
| to={buildLinkWithSearchParams('/send/scan')} | ||
| transition="slideUp" | ||
| applyTo="newView" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The send input had an always-rendered 24px destination div + a 16px gap-4 wrapper, pushing 40px of dead space between the amount and the account selector.
Move the selected destination to replace the action buttons (paste, scan,...)