From 8fcf007a7370a88a5fe9a8505787b4ce2ec4ddd1 Mon Sep 17 00:00:00 2001 From: Antoine Clausse Date: Fri, 24 Apr 2026 15:00:03 +0200 Subject: [PATCH] [web] plans-2026: responsive card layout (mobile 1-col, md 2-col, lg 4-col) (#32905) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * plans-2026: wrap cards to 2-col at md, 4-col at lg Replaces horizontal scroll at md/lg with a wrapping CSS grid so cards stack in rows instead of requiring horizontal scrolling. The 4-column layout now kicks in at lg (~992px) rather than xl (~1200px). Co-Authored-By: Claude Sonnet 4.6 * plans-2026: replace mobile horizontal scroll with 1-col stack Removes the overflow-x scroll behaviour at xs/sm (and the scrollbar-overlap margin/padding hack that came with it). Cards now stack in a single column on small screens, consistent with the 2-col/4-col grid above. Co-Authored-By: Claude Sonnet 4.6 * Fix lint * plans-2026: fix student mode 2-col at lg, remove mobile min-width Student-mode 2-col override was only kicking in at xl; move it to lg so the two visible cards (free + student) fill the row correctly. Also drop the 280px min-width on .plans-card-col — now that mobile uses a 1-col grid instead of horizontal scroll, it causes unnecessary overflow on narrow viewports. Co-Authored-By: Claude Sonnet 4.6 * Update breakpoint for plans cards layout to lg for improved responsiveness --------- Co-authored-by: Claude Sonnet 4.6 GitOrigin-RevId: 5ef923dd3795353bd946c1857e78f4b5f7063ab0 --- .../stylesheets/pages/plans-2026.scss | 33 +++---------------- 1 file changed, 5 insertions(+), 28 deletions(-) diff --git a/services/web/frontend/stylesheets/pages/plans-2026.scss b/services/web/frontend/stylesheets/pages/plans-2026.scss index 0682cb30f1..c98b3c6f70 100644 --- a/services/web/frontend/stylesheets/pages/plans-2026.scss +++ b/services/web/frontend/stylesheets/pages/plans-2026.scss @@ -176,10 +176,8 @@ display: none; } - @include media-breakpoint-up(xl) { + @include media-breakpoint-up(lg) { .plans-cards-row-wrapper { - grid-auto-columns: auto; - grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @@ -187,37 +185,21 @@ .plans-cards-row-wrapper { display: grid; - grid-auto-flow: column; - grid-auto-columns: 90%; + grid-template-columns: 1fr; grid-template-rows: 1fr auto auto auto; - column-gap: var(--spacing-04); - overflow-x: auto; + gap: var(--spacing-04) var(--spacing-04); padding-top: var(--spacing-08); - -webkit-overflow-scrolling: touch; - - // so the scrollbar doesn't overlap the last card's content - margin-bottom: calc(-1 * var(--spacing-05)); - padding-bottom: var(--spacing-05); @include media-breakpoint-up(md) { - grid-auto-columns: 60%; + grid-template-columns: repeat(2, minmax(0, 1fr)); } @include media-breakpoint-up(lg) { - grid-auto-columns: 50%; - } - - @include media-breakpoint-up(xl) { - grid-auto-columns: auto; - grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); - overflow-x: visible; - padding-bottom: 0; } - // When #32905 lands (responsive card grid), move this breakpoint to lg. &.plans-cards-row-auto-fit { - @include media-breakpoint-up(xl) { + @include media-breakpoint-up(lg) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } } @@ -227,11 +209,6 @@ display: grid; grid-row: span 4; grid-template-rows: subgrid; - min-width: 280px; - - @include media-breakpoint-up(xl) { - min-width: 0; - } } .price-plan-card {