### Source Peer feedback, collected in #167. Quote (translated): in `ResultsTable.tsx` both the phone cards and the desktop table are rendered into the DOM at the same time, hidden with `md:hidden` / `max-md:hidden`. You could consider changing that, for example with the ResizeObserver API, a Tailwind-aware hook or a debounced/throttled resize event listener. ### Background The comment in `src/components/elements/ResultsTable.tsx` says the double render is on purpose: both are always in the page and CSS shows one, so a screen reader gets each result once. The cost is that every result is in the DOM twice (20 results are 20 table rows and 20 cards, and the drawings are only in the cards). ### What to do - [ ] Measure first: the number of DOM nodes and the time of the first render of 20 and 40 results, with both views and with one. - [ ] If it is worth it, render only the view that is shown. A `matchMedia('(min-width: 768px)')` hook (with `useSyncExternalStore`) follows the breakpoint without a resize listener, and the breakpoint is then in one place. - [ ] Check that a screen reader still reads each result once, and that the component tests and the e2e accessibility tests pass. - [ ] If it is not worth it, write the measurement down in `docs/ELEMENTS_PAGE.md`, so the decision is explained. ### Done when - [ ] The DOM holds only one of the two views, or the measurement shows why both stay. _Comment made with Claude Code in discussion with Ronja_