Fix: Restore mobile stacking of Main Page two-column rows

Nik Gkountasrequested to merge
fix/main-page-column-responsive-regression into main

The merge that landed T429064 (equal-height side-by-side columns) resolved its conflict with T429067 by taking the plain two-column grid (grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)). That fixed the heights but dropped the mobile responsiveness T429067 had added: the discovery and community/translation rows now stay two-up on phones and overflow with long content, instead of stacking to a single column.

Switch both two-column rows to a responsive grid that keeps BOTH behaviours:

grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr))

  • align-items: stretch still gives equal-height columns (T429064).
  • repeat(auto-fit, …) collapses to a single column once the tracks can't both hold their min width, restoring the mobile stacking (T429067).
  • minmax(min(100%, 300px), 1fr) caps the min at the container width, so long unbroken content never forces horizontal overflow, even below 300px.

Co-Authored-By: Claude Opus 4.8 Bug: T429067

Merge request reports