mirror of
https://github.com/dsh-market/dsh-market.git
synced 2026-09-28 05:03:07 +08:00
fkysly
2499d1517b
* feat: masonry columns for the card grid, and two overflow bugs found on the way A CSS grid sizes every row to its tallest cell, so a card with screenshots left a matching hole beside a card without them — `align-items:start` made that hole visible dead space rather than a stretched card. Reported as the two-up layout looking ragged (#235). Two flex columns now pack independently, and the cards are DEALT into them alternately (0,2,4… left; 1,3,5… right) rather than split down the middle. Column-major `column-count` would pack just as well and needs no JS, but it reorders the list down one column and then the other, which throws away the ranking the sort menu just produced. Dealing alternately keeps rank reading left-to-right, top-to-bottom. The tradeoff is that DOM order becomes column-major while visual order stays ranked, so tests assert the reassembled visual order rather than raw DOM order — asserting the DOM would be asserting the layout's mechanism instead of its result. The description's fixed five-line slot is now a five-line CEILING. The floor existed only to make grid rows line up; masonry packs each column on its own, so reserving five lines for a one-line description just wasted the space it was buying. Two overflow bugs surfaced while getting the e2e suite green, both of which made a card cover its neighbour's Install button and eat the clicks: - `.nm` clips with overflow:hidden + text-overflow:ellipsis, and NEITHER applies to an inline box. Once the title became an <a> (1.16.1, linking to the repo) long names stopped ellipsizing and overflowed the card. This one has been shipped and broken since 1.16.1; masonry only made it reproducible enough for Playwright to catch. - `.card` carries `align-self:start`, which under CSS grid means "do not stretch vertically". In a flex COLUMN the same declaration addresses the other axis and stopped the card stretching horizontally, so its width became max-content: a 444px card inside a 273px column. Same property, opposite meaning, silent either way. The override needs two class names because `.card` is declared later and a single-class selector ties on specificity and loses. * docs: refresh the screenshots for the masonry layout Both languages, reshot against a real host on this build. The previous set shows the CSS-grid layout with the ragged rows this release replaces, so it now advertises the exact problem #235 reported.
