Evaluation: Make the evals run card responsive#148
Conversation
|
Warning Rate limit exceeded
To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
📝 WalkthroughWalkthroughRefactors evaluation-related UIs for responsive layout and mobile workflows: adds wrapping/truncation to headers and cards, introduces mobile modals for creating datasets and running evaluations, exposes an optional ChangesEvaluations UI & Skeletons (responsive/modal wiring)
Sequence Diagram(s)sequenceDiagram
autonumber
participant User
participant EvalRunsList
participant EvaluationsTab
participant Modal
participant RunEvaluationForm
participant API
User->>EvalRunsList: Click "New" (mobile)
EvalRunsList->>EvaluationsTab: invoke onCreateNew()
EvaluationsTab->>Modal: open modal (isFormModalOpen = true)
User->>Modal: fills RunEvaluationForm
RunEvaluationForm->>API: submit evaluation request
API-->>RunEvaluationForm: success
RunEvaluationForm->>EvaluationsTab: notify success
EvaluationsTab->>Modal: close modal (isFormModalOpen = false)
EvaluationsTab->>EvalRunsList: refresh runs list
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@app/components/evaluations/EvalRunCard.tsx`:
- Around line 69-74: The two spans rendering truncated text (the span wrapping
job.dataset_name and the span wrapping assistantConfig.name in EvalRunCard.tsx)
are inline elements so the truncate/max-w-40 rules won't apply; change their
display to block or inline-block (e.g., add a Tailwind class like inline-block
or block to those specific span elements) so max-width takes effect and
text-overflow/ellipsis will work as intended while keeping the existing truncate
class and styling.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 32cd833c-8194-483f-a445-2d360fa8537f
📒 Files selected for processing (1)
app/components/evaluations/EvalRunCard.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 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 `@app/components/evaluations/DatasetsTab.tsx`:
- Around line 228-236: DatasetsTab's create action doesn't signal success so the
modal never auto-closes; update DatasetsTabProps to type handleCreateDataset as
() => Promise<boolean>, then in DatasetsTab add a local async wrapper (e.g.,
const handleCreate = async () => { const success = await handleCreateDataset();
if (success) { fetchDatasets(); setIsFormModalOpen(false); } }) and pass that
wrapper to CreateDatasetForm via formProps; also ensure the parent
implementation of handleCreateDataset returns a boolean success flag.
🪄 Autofix (Beta)
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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 41c3fcd7-7cdf-4d11-a87b-b6ebcf2295dc
📒 Files selected for processing (8)
app/(main)/evaluations/[id]/page.tsxapp/components/DatasetListSkeleton.tsxapp/components/ResultsTableSkeleton.tsxapp/components/RunsListSkeleton.tsxapp/components/evaluations/DatasetsTab.tsxapp/components/evaluations/EvalRunCard.tsxapp/components/evaluations/EvalRunsList.tsxapp/components/evaluations/EvaluationsTab.tsx
✅ Files skipped from review due to trivial changes (4)
- app/components/ResultsTableSkeleton.tsx
- app/(main)/evaluations/[id]/page.tsx
- app/components/DatasetListSkeleton.tsx
- app/components/RunsListSkeleton.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- app/components/evaluations/EvalRunCard.tsx
2 participants
Summary
On the Text Evaluations tab, the View Results button on each evaluation run card was being clipped off the right edge of the card whenever the right-side Run New Evaluation panel was open (450 px). At common viewport widths (~1280–1500 px), there wasn't enough horizontal room for the dataset name + cost row plus both action buttons on a single line, so users couldn't open a completed run from the list.
Before: Single-line row; View Results button clipped at narrow widths
After: Row wraps when needed, both buttons always visible regardless of right-panel state
Also, make the full responsive for tablet, desktop screens.
Summary by CodeRabbit