Skip to content

improve layout of edit reference dialog#435

Open
nabalone wants to merge 3 commits into
developfrom
improve-edit-reference-dialog-layout
Open

improve layout of edit reference dialog#435
nabalone wants to merge 3 commits into
developfrom
improve-edit-reference-dialog-layout

Conversation

@nabalone

Copy link
Copy Markdown
Collaborator

Summary

Layout improvements for the Mark Verses edit reference dropdown (EditReferenceDropdown.tsx, mobile view):

  • Place the verse suffix next to the verse.
  • Let the native select size to its content (width: 'auto') instead of a fixed minWidth: 56 with extra right padding (pr: 2.5), tightening the dropdown spacing.

No functional/behavior change — purely visual layout of the edit reference UI.

Test plan

  • In mobile Mark Verses, open the edit reference dropdown and confirm the verse + suffix read naturally and the select width fits its content without excess padding.

🤖 Generated with Claude Code

nabalone and others added 3 commits July 15, 2026 20:30
Refine the Mark Verses edit reference dropdown layout: place the verse
suffix next to the verse and let the native select size to its content
(auto width) instead of a fixed min-width with extra right padding. This
tightens the dropdown spacing in the mobile Mark Verses edit reference UI.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Tighten the edit reference dialog by reducing the flex-row gap from 2 to
0.5, decreasing the space on either side of the dash separating the start
and end verse references.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@nabalone

Copy link
Copy Markdown
Collaborator Author

Looks funny in the corner corner case that you are on an iphone SE correcting an ill-formed verse reference which had been entered on desktop and the reference has triple digit numbers, like in the Psalms. And even then I think it is still straightforwardly usable.
image2
image1(2)
image0(1)

@nabalone

nabalone commented Jul 17, 2026

Copy link
Copy Markdown
Collaborator Author

Oh also slightly funny in the same corner corner case (on an iphone SE correcting an ill-formed verse reference which had been entered on desktop) if the passage spans multiple chapters in the 2-digits

image0(2)

@nabalone

Copy link
Copy Markdown
Collaborator Author

@josephmyers I am seeing this rounded-corner menu instead of the wheel as my native select everywhere on my iphone. This person claims the wheel has been largely retired https://stackoverflow.com/a/74461785

But you can see that we are using the native select on the phone

image0 image

@nabalone
nabalone marked this pull request as ready for review July 17, 2026 13:08
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.

1 participant