# TokNext visual mismatch inventory

Baseline commit: `34feffc8b9d0d996e7d6da30b8a082af2a2c6db4`

Reference authority inspected:

- `references/dashboard-approved.png` (1536x1024)
- `references/product-detail-approved.png` and `D-1.png` (1500x900)
- `DashboardOverviewReference.tsx`
- `ProductDetailReference.tsx`
- `toknext-reference.css`
- all reference data, SVG/icon, README, implementation-prompt, Vite, TypeScript, entry-point, and source-HTML files

## Dashboard baseline

Measured at 1536x1024:

| Region | Current | Approved/reference target | Mismatch |
| --- | --- | --- | --- |
| Sidebar | x 0, width 264 | visual boundary near x 274 | about 10px too narrow |
| Content | x 292, y 25, width 1216 | starts near x 300, y 30 | too far left and slightly too high |
| KPI row | y 114, height 137 | y about 129, height about 179 | cards are roughly 42px too short |
| Main grid | y 269, height 669 | y about 330, height about 677 | begins roughly 61px too high |
| Left panel | width 782 | about 780 | width is close |
| Right stack | width 418 | about 430 | slightly narrow |

Visible integration mismatches:

- The date-window control from the approved header is missing.
- The greeting omits the approved punctuation/wave treatment.
- The notification control is decorative instead of opening real activity.
- The real account avatar is undersized relative to the approved header.
- KPI icon boxes, type scale, and vertical density are materially smaller than the approved PNG.
- The desktop table clips the Trend column at 1440px because its fixed minimum width exceeds the panel.
- The Top Categories implementation adds an extra `.chart-body` wrapper absent from the reference DOM; its double padding clips legend labels and percentages.
- The right-column chart/card heights are too short for the approved first-viewport composition.
- Paid accounts leave the sidebar footer empty instead of showing the reference-style real account/plan card.

## Product-detail baseline

Measured at 1500x900:

| Region | Current | Approved target | Mismatch |
| --- | --- | --- | --- |
| Sidebar | width 264 | width 250 | 14px too wide for this approved route |
| Page | x 292, y 89 | workspace begins immediately beside sidebar | shared topbar and shell padding offset the reference |
| Product layout | x 327, y 205, width 1110 | starts near x 282, y 82 | 45px too far right and 123px too low |
| Image stage | 392x510 | about 393x489 | width is close; height is about 21px too tall |
| Score card | x 747, y 292, 690x254 | about x 700, y 200, 765x241 | too far right/down, too narrow, slightly too tall |
| Summary | x 747, y 562, 690x101 | about x 700, y 458, 765x100 | too far right/down and too narrow |
| Performance | x 747, y 679, 690x398 | about x 700, y 574, 765x293 | about 105px too low and 105px too tall |

Visible integration mismatches:

- The legacy global search/language topbar remains above the product reference area.
- Shared dashboard padding is applied in addition to the product reference page padding.
- A Tailwind `gap-7` on the reference page adds spacing not present in the supplied hierarchy.
- Short real product titles collapse the header height and shift every analytics card upward relative to long titles.
- The initial range is 30D instead of the approved 7D state.
- Performance metrics are ordered Units Sold, Revenue, Avg. Price, Views instead of Revenue, Units Sold, Avg. Price, Views.
- The performance chart uses the source prototype's 190px plot height, while the approved PNG uses a much denser plot/panel.
- Gallery URLs are not fully deduplicated.
- Both Market Explorer and Products appear active on product routes.

## Responsive baseline

- Both authenticated routes pass the required 390px document-width check (`scrollWidth === innerWidth === 390`).
- The existing mobile drawer is functional and should be preserved.
- Product mobile content has double horizontal padding from the shared shell and product page.
- Dashboard mobile cards stack correctly, but the header action treatment does not match the desktop reference hierarchy.