From 71a108980c122c837bc35dcfe4b8e51a619e65e2 Mon Sep 17 00:00:00 2001 From: Jeff Emmett Date: Thu, 12 Mar 2026 23:08:30 +0000 Subject: [PATCH] =?UTF-8?q?Fix=20payment=20page=20mobile=20layout=20?= =?UTF-8?q?=E2=80=94=20remove=20conflicting=20flex=20container?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The cart.css had `display:flex; align-items:center` on main:has(folk-payment-page) which fought with the component's own `width:100%; margin:0 auto` centering: - flex align-items:center shrunk the subnav to content width - padding:0 0.5rem overrode shell.css padding-top:92px (desktop) - Redundant since all components already self-center with margin:auto Also hide the shop subnav on public-facing pages (/pay/:id, /group-buy/:id) since payers/pledgers don't need Carts/Catalog/Orders navigation. Co-Authored-By: Claude Opus 4.6 --- modules/rcart/components/cart.css | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/modules/rcart/components/cart.css b/modules/rcart/components/cart.css index ed87fbf..d3da94c 100644 --- a/modules/rcart/components/cart.css +++ b/modules/rcart/components/cart.css @@ -4,15 +4,16 @@ main { padding: 0; } -/* Center narrow form pages (payment request, payment page, group buy, dashboard) */ -main:has(folk-payment-request), -main:has(folk-payment-page), -main:has(folk-group-buy-page), -main:has(folk-payments-dashboard) { - display: flex; - flex-direction: column; - align-items: center; - padding: 0 0.5rem; +/* + * Narrow page components (payment page, request form, dashboard, group buy) + * already set their own max-width + margin:0 auto for centering. + * We just need to ensure the subnav still spans full width above them. + */ + +/* Hide the module subnav on public-facing pages — payers/pledgers don't need shop nav */ +main:has(folk-payment-page) .rapp-subnav, +main:has(folk-group-buy-page) .rapp-subnav { + display: none; } @media (max-width: 600px) {