agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-06-06 23:59:01 +02:00
Code Issues Packages Projects Releases Wiki Activity

[web] plans-2026: responsive card layout (mobile 1-col, md 2-col, lg 4-col) (#32905)

Browse Source 
* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* Update breakpoint for plans cards layout to lg for improved responsiveness

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
GitOrigin-RevId: 5ef923dd3795353bd946c1857e78f4b5f7063ab0
This commit is contained in:
Antoine Clausse
2026-04-24 15:00:03 +02:00
committed by Copybot
parent fb6e2f17cb
commit 8fcf007a73
1 changed files with 5 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/plans-2026.scss
+5 -28
View File
@@ -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 {