Masonry Layout Reviews Block for React

Down each column, then across: the browser balances CSS columns by height, so the newest review is at the top of the first column and the next ones follow beneath it. Each card is kept whole with break-inside-avoid. Reordering or filtering reflows the columns, which is why the cards are keyed by review.

An unseen copy of all twelve cards, in both orders, shares the grid cell with the live columns. The cell keeps the height of the taller copy, so a filter that shows fewer cards leaves empty space under them rather than pulling the page up. Cards moving inside that fixed space are expected.

Each is a single choice that cannot be empty: pressing the chosen item again does nothing. The polite line says the result in words, such as "Showing 4 of 12 reviews: 3 and below, most helpful". Edit STAR_CHOICES and ORDER_CHOICES to change the options.

No. A vote changes the count on this page only, can be taken back, and is announced by a polite status line; nothing is sent. Wire onPressedChange to your API if you want to keep them.

The filter and order groups stack full width, the cards form one column that is masked at 520 pixels, and "Show all reviews" (its button says whether the list is expanded) reveals the rest.