Compact therapy search result cards - #1783
Conversation
Close the band/results gap, keep tags on one relevance-sorted row, move the favourite control beside the title, and summarise match-cell copy so cards use less vertical space on phone and desktop. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 35 minutes Your organization has reached its usage spending cap. Adjust your spending cap in the billing tab. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughTherapy Compass now uses sentence-limited previews, prioritized tags, denser responsive result cards, and adjusted search spacing. Tests cover helper behavior, card layout, tag overflow, and production spacing. ChangesTherapy Compass card UI
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ea4a86f836
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Absolute-position the disabled heart at the top-right of ResultCard and keep Open/Compare/Sheet in a three-column footer with short phone labels so mobile cards stay shorter. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Resolve therapy-card.tsx by keeping the densified ResultCard layout and adopting main's keyboard-reachable aria-disabled placeholders from #1778. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Compacts Therapy Compass search cards while preserving key tags, actions, and clinical previews.
Changes:
- Prioritizes relevant tags and shortens repetitive preview text.
- Densifies card layout and improves result-band spacing.
- Adds focused helper and responsive-contract tests.
Blocking issue: The two-column layout overflows and clips content around 640–700px viewports.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
src/components/therapy-compass/data/select.ts |
Adds preview and tag-prioritization helpers. |
src/components/therapy-compass/screens/search-screen.tsx |
Adjusts results spacing. |
src/components/therapy-compass/therapy-card.tsx |
Densifies card content and actions. |
src/components/therapy-compass/ui.tsx |
Supports non-wrapping tag rows. |
tests/therapy-card-preview.test.ts |
Tests new helpers. |
tests/therapy-compass-mode-wiring.test.ts |
Guards result spacing. |
tests/therapy-compass-responsive-contract.test.ts |
Guards compact card structure. |
docs/branch-review-ledger.md |
Records review and verification. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Co-authored-by: BigSimmo <87357024+BigSimmo@users.noreply.github.com>
Head branch was pushed to by a user without write access
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/therapy-compass/ui.tsx (1)
84-91: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winKeep the
+Nindicator outside the clipped tag list.When tags exceed the card width, this container clips later flex children. The trailing
+Nindicator can disappear.Use a clipped inner container for shown tags. Render
+Nas a non-shrinking sibling so it remains visible.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/therapy-compass/ui.tsx` around lines 84 - 91, Update the tag layout around the shown.map rendering so only the shown tags are wrapped in an inner container with the existing clipping behavior. Render the extra count Tag as a sibling outside that clipped container, and make it non-shrinking so the +N indicator remains visible when tags exceed the available width.
🧹 Nitpick comments (1)
src/components/therapy-compass/therapy-card.tsx (1)
59-59: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winReplace new literal spacing values with theme tokens.
Lines 59 and 86 add literal
remandpxvalues inside arbitrary classes. Express these offsets with repository Tailwind 4 theme spacing tokens.As per coding guidelines, use “Tailwind 4
@themetokens … rather than introducing hardcoded design values.”Also applies to: 86-86
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/therapy-compass/therapy-card.tsx` at line 59, Update the responsive grid className in the therapy card, including the corresponding spacing at the second referenced line, to replace literal rem and px offsets in the arbitrary padding values with existing Tailwind 4 `@theme` spacing tokens. Preserve the current responsive layout and tap-spacing calculations while reusing repository-defined tokens instead of introducing new hardcoded design values.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/therapy-compass/data/select.ts`:
- Around line 60-64: Update the filtering logic in the useful parts calculation
to remove sentences beginning with the excluded title followed by a valid
boundary, including prose such as “Behavioural activation is…”, while preserving
unrelated words that merely share the title’s prefix. Add a regression test
covering a title followed by prose and verify that cardPreviewText excludes it.
In `@src/components/therapy-compass/therapy-card.tsx`:
- Around line 34-42: Update the whyMatched and bestFit expressions to call
cardPreviewText separately for each candidate field before applying fallbacks.
Chain the resulting previews with || so therapy.indications, patientPopulation,
and setting are evaluated when an earlier preview becomes empty after excluding
therapy.name; preserve the existing final default messages.
---
Outside diff comments:
In `@src/components/therapy-compass/ui.tsx`:
- Around line 84-91: Update the tag layout around the shown.map rendering so
only the shown tags are wrapped in an inner container with the existing clipping
behavior. Render the extra count Tag as a sibling outside that clipped
container, and make it non-shrinking so the +N indicator remains visible when
tags exceed the available width.
---
Nitpick comments:
In `@src/components/therapy-compass/therapy-card.tsx`:
- Line 59: Update the responsive grid className in the therapy card, including
the corresponding spacing at the second referenced line, to replace literal rem
and px offsets in the arbitrary padding values with existing Tailwind 4 `@theme`
spacing tokens. Preserve the current responsive layout and tap-spacing
calculations while reusing repository-defined tokens instead of introducing new
hardcoded design values.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 39fb4ef5-af91-4d34-b93c-3ead753dd8c6
📒 Files selected for processing (8)
docs/branch-review-ledger.mdsrc/components/therapy-compass/data/select.tssrc/components/therapy-compass/screens/search-screen.tsxsrc/components/therapy-compass/therapy-card.tsxsrc/components/therapy-compass/ui.tsxtests/therapy-card-preview.test.tstests/therapy-compass-mode-wiring.test.tstests/therapy-compass-responsive-contract.test.ts
Keep TagRow +N unclipped, exclude title/alias restatements and title-prefixed prose from card previews, and apply field fallbacks after preview filtering. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Resolve branch-review ledger via the ledger merge driver (union + exact-row dedupe). Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Compared with main CI run #9522 (failure). Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger. |
Resolve branch-review ledger via the ledger merge driver (union + exact-row dedupe). Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Summary
space-y-2.5 sm:space-y-3, trim filter-strip bottom margin).+N, prioritizing active filters and query matches before catalogue order.ResultCard: pin the favourite control to the card top-right, drop the heart-only grid column, keep Open/Compare/Sheet in one three-column footer (short phone labels), omit title-redundant subtitles, and summarise/clamp WHY / AVOID / BEST FIT copy.origin/main: keep densified layout and adopt fix(a11y): make unavailable placeholder buttons reachable by keyboard #1778 keyboard-reachablearia-disabledplaceholders (ignoreUnavailableActivationfor Favourite; early-return +aria-disabledfor unavailable Patient sheet).Verification
tests/therapy-card-preview.test.ts,tests/therapy-compass-responsive-contract.test.ts,tests/therapy-compass-mode-wiring.test.ts,tests/require-button-wiring.test.ts— 41 passedgit merge-tree --write-tree origin/main HEAD— cleannpm run verify:pr-localon densify tip; main merge resolution re-checked with focused tests abovenpm run ensure→/therapy-compass/search?q=CBT&run=1phone + desktopTherapy search phone densify
Therapy search desktop densify
Risk and rollout
Notes
aria-disabled+ignoreUnavailableActivation(keyboard-reachable placeholder; not nativedisabled).To show artifacts inline, enable in settings.
Summary by CodeRabbit
New Features
Style
Tests