Uh oh!
There was an error while loading. Please reload this page.
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 |
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
Uh oh!
There was an error while loading. Please reload this page.
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
Uh oh!
There was an error while loading. Please reload this page.
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