Repository navigation
Conversation
f5870a3 to
0a37af8
Compare
On the mobile Mark Verses screen, references with three-digit chapter or verse numbers (e.g. "119:10b-11a", "119:13-120:5e") wrapped onto two lines in the table, and the Edit Reference dialog title broke mid-number. Shrink the table's Start-Stop column to its own content (was a fixed 42%) and set the reference text to nowrap so it keeps the freed width on one line. In the dialog, drop the title to 1.1rem and keep the numeric range in a nowrap span so the whole title fits one line on a phone. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ile) Give the mobile Mark Verses column the full pane width (width: 100% / minWidth: 0) instead of constraining it to the player width, so the table and waveform can use the leftover space to the right. Pass the full pane width into PassageDetailMarkVerses (drop the -40 inset and switch to paneWidth) and let the player follow via maxWidth 100%. Keep the "Start --> Stop" header cell on one line (whiteSpace: nowrap, width: 1%) so three-digit references no longer wrap. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
0a37af8 to
24a81bf
Compare
There was a problem hiding this comment.
🔵 Needs a closer look
The changes are purely visual CSS/layout tweaks affecting both the mobile and desktop Mark Verses rendering paths, and their correctness can only be confirmed by manual visual inspection across viewport sizes.
0 open findings
What changed in this PR
This PR fixes TT-7623: on mobile-width viewports, three-digit chapter/verse references (e.g. 119:10b-11a) and the "Start → Stop" header were wrapping onto two lines in the Mark Verses table and the Edit Reference dialog. It is a CSS/layout-only change within the PassageDetail Mark Verses feature; no application logic is altered. Because the Mark Verses component (mobile/MarkVerses/…) is reused by the desktop grid, the width change also affects the desktop rendering path.
Changes:
- Keep the Mark Verses limits column (header + body) and the reference text on a single line via
whiteSpace: nowrapand a shrink-to-contentwidth: '1%'. - Let the Mark Verses column fill the full pane (
width: '100%',minWidth: 0) by passingpaneWidthinstead of the fit-reduced width, with the player following via its existingmaxWidth: 100%. - Keep the Edit Reference dialog title's time-limit range together (
nowrap) and slightly reduce its font size so it fits one line on a phone.
| File | Description |
|---|---|
web/src/routes/PassageDetail.tsx |
Mobile step now passes full paneWidth to PassageDetailMarkVerses (dropped the -40 inset). |
web/src/components/PassageDetail/PassageDetailGrids.tsx |
Desktop grid passes paneWidth (was playerPaneWidth) to the Mark Verses column. |
web/src/components/PassageDetail/mobile/MarkVerses/PassageDetailMarkVerses.tsx |
Container fills the pane (width: '100%', minWidth: 0, overflow: hidden) instead of being constrained to the player width. |
web/src/components/PassageDetail/mobile/MarkVerses/MarkVersesTable.tsx |
Limits column shrinks to content and stays nowrap; reference text set to nowrap. |
web/src/components/PassageDetail/mobile/MarkVerses/EditReferenceDropdown.tsx |
Dialog title keeps the limit range together (nowrap span) and uses a smaller font size. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
On small screens (isMobileWidth) the Mark Verses table's Edit Reference button now renders just the pencil icon with no text and shrinks to hug it (drops MUI's 64px min-width and trims padding). Non-mobile widths keep the labeled icon + "Edit" button. Icon and optional label are composed as Stack children so the default Typography wrapper is bypassed, avoiding an invalid block-in-paragraph nesting. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
nabalone
left a comment
nabalone
left a comment
There was a problem hiding this comment.
Actually now Greg, Jiho and I decided to use just the pencil icon on phone widths because the word "edit" may be longer in other languages. See that even with an unrealistically full row it does not overflow
There was a problem hiding this comment.
🔵 Needs a closer look
The changes are purely visual/layout adjustments across both mobile and desktop Mark Verses views whose correctness depends on rendered output that only manual visual review can confirm.
1 open finding
🧠 Review effort: Balanced
| // Children are custom markup (icon + optional label), so | ||
| // skip the Button's default Typography wrapper — a block | ||
| // Stack inside a <p> would be invalid; we wrap the label | ||
| // in its own Typography below to keep its styling. |
Summary
Fixes TT-7623: on mobile, three-digit chapter/verse references wrapped onto two lines in the Mark Verses table and the Edit Reference dialog.
whiteSpace: nowrap,width: 1%) so three-digit references no longer wrap.width: 100%/minWidth: 0) instead of constraining it to the player width, so the table and waveform use the leftover space to the right. The full pane width is passed intoPassageDetailMarkVerses(dropped the-40inset) and the player follows viamaxWidth: 100%.Test plan
🤖 Generated with Claude Code