Improve mobile evidence sheet UX: clarify purpose, replace decorative circle, and tighten layout - #1820
Conversation
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 11 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 (2)
📝 WalkthroughWalkthroughThe clinical evidence UI now shows semantic support-status icons, clearer review guidance, responsive mobile layouts, and feedback wording that explains submissions do not change answers. A DOM test validates the updated evidence sheet content. ChangesEvidence sheet UX
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/clinical-dashboard/visual-evidence.tsx (1)
366-383: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winAdd a non-color cue for
PartialandUnsupported.
IconselectsCircleAlertfor both labels. Claim rows show the icon but not the status text. Users who cannot distinguish the theme colors cannot tell these statuses apart. Use distinct iconography or render a short visible status label. Verify the selected Lucide icons against the pinned dependency version.🤖 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/clinical-dashboard/visual-evidence.tsx` around lines 366 - 383, Update SupportStatusIcon so Partial and Unsupported use distinct non-color cues instead of sharing CircleAlert; select separate Lucide icons verified against the pinned dependency version, or render short visible status text. Preserve the existing Direct styling and aria-label behavior while ensuring claim rows can distinguish all support levels without relying on color.tests/visual-evidence-tabs.dom.test.tsx (1)
63-70: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAssert that the legacy placeholder is absent.
The test title claims that decorative placeholders are removed, but the assertions only check the new content and one status image. The test can pass if the old placeholder remains in the claim row. Add an absence or structure assertion using the existing placeholder selector or test ID.
🤖 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 `@tests/visual-evidence-tabs.dom.test.tsx` around lines 63 - 70, Update the test named “explains the review purpose and identifies claim support without decorative placeholders” to assert that the legacy decorative placeholder is absent, using the existing placeholder selector or test ID. Keep the current visibility assertions unchanged.
🤖 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/clinical-dashboard/visual-evidence.tsx`:
- Line 451: Update the linked row’s accessible name near SupportStatusIcon and
the link’s aria-label so it includes the row’s support status (Direct, Partial,
or Unsupported), using existing support-level labeling and preserving the
current source-name text.
- Line 451: Update claimRowsForEvidencePanel so sourceStrength "none" is not
rewritten to "partial"; map it to "unsupported" or the existing separate unknown
state consistently with supportLabel and the source-review behavior. Update
SupportStatusIcon usage as needed to preserve that classification, and add a
test covering the "none" fallback path.
- Line 409: Update the evidence-row class string in the visual evidence
component to replace the hardcoded min-h-[72px] with the theme-backed min-h-18
token, preserving the existing 72px minimum height and all other layout classes.
---
Nitpick comments:
In `@src/components/clinical-dashboard/visual-evidence.tsx`:
- Around line 366-383: Update SupportStatusIcon so Partial and Unsupported use
distinct non-color cues instead of sharing CircleAlert; select separate Lucide
icons verified against the pinned dependency version, or render short visible
status text. Preserve the existing Direct styling and aria-label behavior while
ensuring claim rows can distinguish all support levels without relying on color.
In `@tests/visual-evidence-tabs.dom.test.tsx`:
- Around line 63-70: Update the test named “explains the review purpose and
identifies claim support without decorative placeholders” to assert that the
legacy decorative placeholder is absent, using the existing placeholder selector
or test ID. Keep the current visibility assertions unchanged.
🪄 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: 554ee755-ee52-409f-956b-2f9e75365206
📒 Files selected for processing (5)
docs/branch-review-ledger.mdsrc/components/clinical-dashboard/answer-result-surface.tsxsrc/components/clinical-dashboard/evidence-panels.tsxsrc/components/clinical-dashboard/visual-evidence.tsxtests/visual-evidence-tabs.dom.test.tsx
There was a problem hiding this comment.
Pull request overview
Improves the mobile evidence sheet’s clarity, accessibility, and layout.
Changes:
- Adds semantic claim-support indicators and tighter claim rows.
- Clarifies evidence feedback and sheet guidance.
- Adds focused DOM coverage and records the review.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
visual-evidence.tsx |
Adds status icons and compacts the evidence sheet. |
evidence-panels.tsx |
Clarifies feedback copy and mobile layout. |
answer-result-surface.tsx |
Updates the evidence-sheet description. |
visual-evidence-tabs.dom.test.tsx |
Tests guidance, status, and feedback text. |
branch-review-ledger.md |
Records the completed review. |
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
CI triageCI failed on this PR. Automated classification of the 2 failed job(s):
Compared with main CI run #9764 (cancelled). Classification is evidence routing, not permission to ignore a failure. Exact quarantined Playwright identities remain governed by the flake ledger. |
PR review summary (review-and-fix)
I also attempted inline thread replies, but those APIs were rejected for this GraphQL-ID style thread/comment format; all threads are resolved and dispositions are posted here. Ledger entry appended:
|
Babysit sweep summary\n\n- PR head reviewed: �beb08c642b7e0d61c6cf5cde3df0fc683ec54a0 (after one sync merge from origin/main)\n- Mergeability snapshot: merge-tree clean\n- Ahead/behind: origin/main...HEAD = 0/7\n- Merge-state: BLOCKED, mergeable is MERGEABLE\n- Actionable review threads: none\n- Required checks:\n - Prior required run was blocked by Production UI (1) failure:\n ests/ui-route-coverage.spec.ts :: previously uncovered production routes › DSM comparison renders responsively and removes a selected diagnosis\n (page.waitForURL(//dsm/compare?ids=bipolar-ii-disorder$/) timed out)\n - Current checks are running after the pushed sync commit\n- Fixes/applicable edits: one unblock sync merge of origin/main pushed to branch\n- Decision: no PR-introduced actionable defects identified in this review sweep; I’m dispositioning the blocking UI failure as pre-existing/outside this PR's changed path until the current run pinpoints a fresh head-specific signal. |
Motivation
Description
SupportStatusIconthat shows Direct/Partial/Unsupported support, includes an accessiblearia-label, and uses the design-system tones for color and borders (src/components/clinical-dashboard/visual-evidence.tsx).src/components/clinical-dashboard/visual-evidence.tsx).Is the answer supported?, make the feedback buttons a centered two-column grid on mobile, and ensure the copy clearly states feedback is recorded for review and does not change the answer (src/components/clinical-dashboard/evidence-panels.tsx).Check how well sources support this answer., add an explanatory paragraph above mobile tabs, add a focused DOM test, and update the branch review ledger entry (src/components/clinical-dashboard/answer-result-surface.tsx,tests/visual-evidence-tabs.dom.test.tsx,docs/branch-review-ledger.md).Testing
npm run test -- --run tests/visual-evidence-tabs.dom.test.tsxand it passed (7 tests passed).npm run test:e2efor thedemo answer flow reaches a source-backed answercase) on Chromium and it passed for the built production artifact.npm run eval:rag:offlineand it passed (23 suites, 574 tests across 36 golden cases).npm run ensureto verify the local app andnpm run formatto normalize formatting;gitand the ledger guard checks succeeded locally, and a ledger row documenting the review was appended (no remaining high-confidence defects).Notes: GitHub PR creation was not performed because the environment lacks an authenticated
ghsession; live provider/production-readiness gates (Supabase/OpenAI) were intentionally not run as they require explicit authorization.Codex Task
Summary by CodeRabbit
New Features
Accessibility
Bug Fixes
Tests