fix(analytics): keep post metrics in view on the creator dashboard - #6769
Conversation
The post title cell was nowrap inside an auto-layout table, so a long title set the column's min-content width to the full title and pushed every metric column past the scroll edge. The table read as a plain article list. On laptop and up the title column now takes the spare width and truncates (`w-full max-w-0`), so all columns fit without horizontal scroll. Below laptop each row stacks: title, date, then the four metrics with their own labels, and a sort dropdown replaces the hidden column headers. Header and dropdown share one next-sort rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
rebelchris
left a comment
rebelchris
left a comment
There was a problem hiding this comment.
Fix looks right: w-full max-w-0 on the title cell keeps all the metric columns on screen at laptop width, and pulling the next-sort rule into getNextSort means the column headers and the dropdown behave the same way. I have nothing blocking. Three inline notes below. The main one is about accessibility in the stacked mobile layout.
Not checked by this review: how the preview looks in a browser at mobile, tablet and laptop widths (still unticked in the test plan), and test_webapp, which was still running when I posted this.
Reviewed by AI.
| color={TypographyColor.Tertiary} | ||
| tag={TypographyTag.Span} | ||
| className="block truncate laptop:hidden" | ||
| aria-hidden |
There was a problem hiding this comment.
Non-blocking (a11y): Below laptop, thead is display: none, and the tbody/tr are switched to block/grid. That takes the column headers out of the accessibility tree, and in Safari/VoiceOver changing the display of table elements can drop table semantics completely. On a phone, this label is now the only thing that says what each number means. Because it is aria-hidden, a screen reader hears "1.2K, 34, 5, 210" with nothing to tell the numbers apart.
You can just drop aria-hidden. At laptop the label is laptop:hidden (display: none), so it is already out of the accessibility tree there and won't be read twice next to the real column header.
Reviewed by AI.
| </Typography> | ||
| </td> | ||
| <MetricCell | ||
| column={columns[1]} |
There was a problem hiding this comment.
Non-blocking: columns[1] through columns[4] tie each cell to its position in the columns array. If someone reorders or inserts a column (for example the reputation column mentioned in the description), the mobile labels end up on the wrong metric with no error from types or tests. Could these look the column up by key instead, e.g. a columnByKey(CreatorPostSortBy.Impressions) helper next to columnLabel, or a small key→column map?
Reviewed by AI.
|
|
||
| // Column headers sort the table on laptop; the stacked rows below that have | ||
| // no header row, so the same sorting lives in a dropdown. | ||
| const SortSelect = ({ |
There was a problem hiding this comment.
Non-blocking: Below laptop this dropdown is now the only way to sort, but no test covers it. The specs were updated so they reach the header buttons only. Could you add one case that opens the trigger, picks a column and checks onSortChange, plus one where re-picking the active column flips the order?
Small UX question on that second case: choosing the item that's already active silently reverses the order, and the only sign is the arrow on the trigger. Is that what you want here, or should the menu items show the direction (or offer asc/desc explicitly)?
Reviewed by AI.
The Published column and single-line truncation left titles about
150px, so most of each title was cut off. The publish date now sits
under the title and titles clamp to two lines; the post column header
keeps the publish-date sort ("Post · Published").
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch was successfully deployed
1 participant
Summary
Feedback: the analytics post table "only lists the articles themselves" — the performance columns were there but pushed off-screen.
Cause: the title cell is
nowrapin an auto-layout table, so a long title widened the post column to the full title length and every metric column landed behind a horizontal scroll.Fix
w-full max-w-0) and clamps titles to two lines; droppedmin-w-[42rem]and theoverflow-x-autowrapper, so all columns fit.Reputation earned isn't part of
creatorPostPerformance, so bringing that column back needs a backend field first.Test plan
CreatorPostPerformanceTable.specandAnalyticsPage.specpass/analyticsin a browser at mobile, tablet and laptop widths with long post titles🤖 Generated with Claude Code
Preview domain
https://fix-analytics-post-table-fit.preview.app.daily.dev