fix(project-selector): move row tooltip to right side; simplify content - #2675
Open
Sebastian-ubs wants to merge 2 commits into
Open
fix(project-selector): move row tooltip to right side; simplify content#2675Sebastian-ubs wants to merge 2 commits into
Sebastian-ubs wants to merge 2 commits into
Conversation
The row tooltip in <ProjectSelector>'s popover previously anchored to
side="top", which routinely overlapped the row above (or the search bar
for the topmost row). Move it to side="right" so it sits clear of the
popover's content column and reads as a canonical row-details affordance.
Content is also simplified to three rows of straightforward information:
* Bold full name.
* Language, with `(languageCode)` muted in parentheses when both are
present. Handles partial data — only-code or only-language rows still
render sensibly, no stray parenthesis.
* Scroll group — single line covering every case:
* bound-but-closed rows: caller's `boundButClosedTooltip` template
(letter substituted), italic
* open-tab rows: `{scrRefLabel} ({letter})` when a ref label is
available, else the letter alone
* `project`-mode rows: comma-joined letters of all open scroll groups
(mirrors the chip strip on the row)
Disabled reason is retained as a fourth muted-italic row for accessibility
— it surfaces information not otherwise visible on the row.
Alignment shifts from `text-center` to `text-start` to match a
side-anchored tooltip convention.
Co-authored-by: Claude <noreply@anthropic.com>
Sebastian-ubs
requested review from
irahopkinson,
jolierabideau,
lyonsil,
rolfheij-sil and
tjcouch-sil
as code owners
August 13, 2026 15:10
…nd arrow
Two follow-ups to the row tooltip change:
* shadcn's TooltipContent applies `inline-flex items-center gap-1.5`
to its content wrapper (`shadcn-ui/tooltip.tsx:96`), so sibling
<div>s were laying out as horizontal columns. Add
`flex-col items-start gap-0.5` to the local className so the info
lines (full name / language / scroll group / disabled reason) stack
vertically as intended.
* shadcn's TooltipContent arrow is a rotate-45 square that gets clipped
to a triangle for side=top/bottom via clip-path. For side=left/right
the wrapper's own comment (`shadcn-ui/tooltip.tsx:122-128`) documents
that no clip-path is applied — "no consumer today needs a bordered
left/right arrow" — so it renders as an unclipped diamond that pokes
through the tooltip as a small rectangle. Pass `showArrow={false}`
on this tooltip; the relationship to the hovered row is clear from
position and hover-open behaviour.
Co-authored-by: Claude <noreply@anthropic.com>
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
1 participant
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
Two changes to the row tooltip inside
<ProjectSelector>'s popover:1. Anchor moves from top to right
side=\"top\"frequently overlapped the row directly above (or the search bar for the topmost row).side=\"right\"puts the tooltip clear of the popover's content column and reads as a canonical row-details affordance. Alignment shifts fromtext-centertotext-startto match side-anchored tooltip convention.2. Content is restructured into three simple rows
Old content was a bold full name, then a couple of case-specific conditional lines. New content is a fixed three-row layout (with an optional fourth row for a disabled reason):
(languageCode)muted in parentheses when both are present. Handles partial data (language-only orlanguageCode-only rows still render sensibly with no stray parenthesis).boundButClosedTooltiptemplate with the letter substituted, rendered italic.project-multi/projectScrollGroupmodes with ascrollGroupId):{scrRefLabel} ({letter})when the caller supplied a scripture-ref label, else just the letter.project-mode rows: comma-joined letters of all open scroll groups (A, B), mirroring the chip strip on the row.Test plan
SingleProject,MultiProject,ScrollGroupBinding,PerRowDisabled,NoProjects). Tooltip anchors right of the row, doesn't overlap the row above.SingleProject: hover a row whose language and languageCode are both set → tooltip showsEnglish (en-US). Hover a row with a scroll group open → tooltip shows the letter list. Truncate the container so the row text clips — tooltip still opens on hover (unchanged truncation-open behaviour).ScrollGroupBinding: close a tab to force a bound-but-closed row → its tooltip's scroll-group line renders italic with the caller'sboundButClosedTooltipstring.PerRowDisabled: hover a disabled row → the muted italicdisabledReasonstill surfaces on its own line under the scroll-group line.npm --workspace lib/platform-bible-react run test -- --run src/components/advanced/project-selector/— 53 tests pass.npm --workspace lib/platform-bible-react run lint— clean.Relation to other in-flight PRs
Touches the same file as #2672 (z-index fix) and #2673 (grouping options). Based on
main, so this PR is independent and can merge in any order — expect a small mechanical rebase against whichever of those merges last.AI-assisted.
This change is
before
after