feat(web): full-width category layout with a sticky left filter sidebar #1132

Requested by JOY on 2026-10-27.

Problem

Category listing pages (for example https://rate.vn/smartphones) sit inside the Bootstrap .container, capped at 1320px. At 1920px each side has about 300px of empty margin and the results column is narrow. The filter sidebar is already on the left, but it is narrow and scrolls away. Extra blocks (quick 1v1 compare, deal box) sit above the results and push the product list down.

Goal

A full-width category layout:

• Left filter sidebar of fixed width (about 260-300px), position: sticky under the header, independently scrollable when taller than the viewport.
• Product results take the remaining width and reflow with the screen (more columns or wider rows), with a sensible max content width (about 1600-1800px) so lines do not get too long.
• Secondary blocks (quick compare, deals) must not push the product list far down; place or collapse them so results start near the top.
• Phone: sidebar becomes the existing off-canvas or a filter drawer/button; no horizontal scroll.

References: PCPartPicker product lists, RTINGS Table Tool, Geizhals and idealo category pages.

Scope

All category listing pages that share this layout (smartphones, laptops and the other categories). Product detail, compare and other pages are out of scope unless they share the same component.

Acceptance

• Before and after screenshots at 1280, 1440, 1920 and phone (390) in the PR.
• No horizontal scroll at 320-1920px.
• The sticky sidebar does not cover the footer or overlap content.
• The keyboard and focus order are unchanged and still logical.
• The axe WCAG 2.1 AA E2E suite stays green.
• Existing E2E tests stay green or are updated with a reason.
• No layout shift regressions on load (CLS not worse).