bytedance / bytedance/TableVerse
Fix comparison row alignment on screens below 720px
- Dominant language
- No language data
- Stars
- 25
- Forks
- 1
- PR merge metrics
- No merged PRs in 30d
Description
## Problem
The comparison table loses its row alignment on screens at or below 720px.
At `web@66efcf4f1f8a4aaf5cc937e5b6d5bd9724f3ea04`, `compare.js` appends five grid children for each viewpoint: one row label followed by four method cells. The desktop grid has five columns, which matches that structure. The mobile media query changes the grid to only three columns (`28px + repeat(2, minmax(0, 1fr))`) without wrapping each viewpoint or assigning explicit grid positions.
CSS Grid auto-placement therefore lays out each viewpoint as:
1. row label + first two methods
2. remaining two methods + the next viewpoint's label
This mixes labels and results instead of producing the intended 2x2 method layout for each viewpoint.
## Reproduction
1. Open https://bytedance.github.io/TableVerse/#comparison at a viewport width of 720px or below.
2. Select a scene and inspect the comparison rows.
3. Observe that method cells continue into the next auto-placement row and the following viewpoint label no longer starts with its own four results.
The same mismatch can be reproduced statically by comparing the five children emitted per viewpoint in `docs/static/js/compare.js` with the three-column mobile grid in `docs/static/css/paper.css`.
## Expected behavior
Each viewpoint label should remain associated with all four method cells, displayed as a readable 2x2 group on narrow screens.
## Actual behavior
Grid auto-placement interleaves cells and the following viewpoint label.
## Impact
Comparison results can be visually attributed to the wrong viewpoint on mobile devices.
## Environment
- Source: `web@66efcf4f1f8a4aaf5cc937e5b6d5bd9724f3ea04`
- Live Pages deployment: https://bytedance.github.io/TableVerse/
- Reproduced from the current Pages source and CSS Grid placement rules
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with docs/static/js/compare.js to confirm the five children emitted per viewpoint, then inspect the mobile grid rules in docs/static/css/paper.css. Reproduce the issue at a viewport width of 720px or below and verify that each viewpoint label stays associated with its four method cells in a readable 2x2 group.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 86/100