Merge pull request #21766 from overleaf/mf-checkout-main-layout-flexbox

[web] Use flex for layout of the new payment page to match figma width on the left card

GitOrigin-RevId: ca2b104ee50b7df0f352c3baaa610514e0432ffd
This commit is contained in:
M Fahru 2024-11-12 07:29:40 -07:00 committed by Copybot
parent 52eb08ae96
commit c5e1c63959

View file

@ -141,13 +141,22 @@
.payment-container {
padding-top: var(--spacing-13);
.payment-row {
display: flex;
gap: var(--spacing-10);
justify-content: center;
@include media-breakpoint-down(lg) {
flex-direction: column;
align-items: center;
}
.payment-review-panel {
width: 339px;
@include media-breakpoint-down(lg) {
width: 100%;
}
h4 {
color: var(--neutral-70);
font-weight: 600;
@ -181,13 +190,6 @@
}
}
@include media-breakpoint-up(md) {
.payment-review-panel {
padding: 0;
}
}
}
.group-heading {
display: flex;
align-items: center;