Fix uneven gallery squares and size the phone section copy

The card row's squares came out three different widths: centering the
cards in the gallery shrank each one to its own label, and the square is
a share of its card. The cards take their column again and their contents
do the centering.

On the handset the section title and its paragraph were the smallest type
on a board that has room for more, so both take a step up.

Prepared with AI assistance (Cursor).

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Abdul Wahab
2026-09-01 10:02:40 +05:00
co-authored by Cursor
parent e2048614b5
commit 05f228728e
+12 -1
View File
@@ -5263,7 +5263,10 @@ body.picker-page {
height: auto;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ps-gap-md);
justify-items: center;
/* The cards keep their column's width so the three squares are one size;
what centers is their contents, below. Shrinking the card to its label
handed each square a different width. */
justify-items: stretch;
}
.picker-preview-type .ps-desktop .ps-gallery-item {
@@ -5382,6 +5385,14 @@ body.picker-page {
gap: var(--ps-gap-xs);
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .ps-editorial-copy strong {
font-size: calc(var(--pt-title) * 1.12);
}
.picker-preview-type[data-surface="persuade"] .ps-phone-body .pt-section-body {
font-size: var(--pt-base);
}
/* One gap owns the spacing down the phone. The margins underneath it were a
second, unrelated scale, and every element that carried one landed on a
different interval from its neighbour. */