bytedance / bytedance/TableVerse

Fix comparison row alignment on screens below 720px

Open Beginner friendly
#3 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.