jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix payment page mobile layout — remove conflicting flex container 

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 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-12 23:08:30 +00:00
parent 661aca972e
commit 71a108980c
1 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
modules/rcart/components/cart.css
View File

@ -4,15 +4,16 @@ main {
padding: 0; padding: 0;
} }
/* Center narrow form pages (payment request, payment page, group buy, dashboard) */ /*
main:has(folk-payment-request), * Narrow page components (payment page, request form, dashboard, group buy)
main:has(folk-payment-page), * already set their own max-width + margin:0 auto for centering.
main:has(folk-group-buy-page), * We just need to ensure the subnav still spans full width above them.
main:has(folk-payments-dashboard) { */
display: flex;
flex-direction: column; /* Hide the module subnav on public-facing pages — payers/pledgers don't need shop nav */
align-items: center; main:has(folk-payment-page) .rapp-subnav,
padding: 0 0.5rem; main:has(folk-group-buy-page) .rapp-subnav {
display: none;
} }
@media (max-width: 600px) { @media (max-width: 600px) {