Fix feedback table layout with long metric names and many tags#6617
Fix feedback table layout with long metric names and many tags#6617
Conversation
- Truncate long metric names with ellipsis + tooltip on hover - Constrain metric column to max-w-[300px] - Collapse tags after 3 visible, showing "+N more" badge with tooltip - Extract TagBadge into its own component for reuse Closes #6437
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 97e4fd899e
ℹ️ 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".
| <TooltipTrigger asChild> | ||
| <Badge | ||
| variant="outline" | ||
| className="text-muted-foreground cursor-help text-xs" |
There was a problem hiding this comment.
The new +{hiddenCount} more control hides tags behind a tooltip, but its trigger is a Badge (renders as a non-focusable div) wrapped with TooltipTrigger asChild, so keyboard users cannot focus it to open the tooltip. In keyboard-only flows (and touch environments without hover), the hidden tags become effectively inaccessible, which is a regression from the previous behavior where all tags were visible.
Useful? React with 👍 / 👎.
| <TooltipTrigger asChild> | ||
| <span className="cursor-help truncate font-mono"> | ||
| {getMetricName(item)} | ||
| </span> |
There was a problem hiding this comment.
This change truncates metric names and relies on a tooltip for the full value, but the tooltip trigger is a plain span inside TooltipTrigger asChild, which is not keyboard-focusable. As a result, keyboard-only users cannot reveal full metric names once truncated, so important row-identifying information is no longer reachable in non-mouse navigation.
Useful? React with 👍 / 👎.
Replace the table-based feedback layout with a card-based layout that handles long metric names and many tags gracefully. Each card shows metric name with badges on the first row, ID and value on the second row, and tags flowing naturally on the third row. - Use design tokens (text-fg-muted/secondary/tertiary) consistently - Use Skeleton component for loading states - Add data-testid attributes for stable e2e test selectors - Remove all tag truncation to show full tag content - Update e2e tests to use data-testid instead of table cell selectors
- Delete truncation test from TagsBadges.test.tsx (truncation was removed) - Remove non-null assertions on optional last_id fields in feedback section consumers — props already accept undefined
- Add bg-bg-primary border-border tokens to match other cards in codebase - Fix skeleton to match card layout (two-column header with timestamp) - Extract getMetricName to local variable instead of calling 4x per card - Remove redundant JSDoc comment on FeedbackCardsSkeleton - Fix stale "table" references in comments
Scope getByText(json) to the feedback card to avoid strict mode violation when the comment textarea hasn't closed yet.
Scope getByText("tensorzero::datapoint_id") to getByRole("cell") to
avoid strict mode violation — feedback cards now display tag badges
containing "tensorzero::datapoint_id=..." which matched the selector.
Summary
bg-bg-primary border-border,text-fg-muted/secondary/tertiary) and<Skeleton />componentdata-testidattributes for stable e2e test selectorsCloses #6437
Before
After
Feedback cards with long metric names, evaluation tags, and Latest/Overwritten badges
Empty state — no feedback
Test plan