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

Fix mobile formatting on payment request page 

Add comprehensive responsive breakpoints at 600px and 380px:
- Stack step card, form field rows, share rows vertically
- Scale down typography (title, amount, hints)
- Reduce padding and QR code size for narrow screens
- Make toggle buttons and method toggles compact
- Full-width action buttons on mobile

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-12 22:36:55 +00:00
parent 97a077b256
commit 61f5544b4e
1 changed files with 39 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
modules/rcart/components/folk-payment-request.ts
View File

@ -793,12 +793,48 @@ class FolkPaymentRequest extends HTMLElement {
.share-error { color: #f87171; font-size: 0.8125rem; margin-top: 0.5rem; }
@media (max-width: 600px) {
.toggle-btn { font-size: 0.75rem; }
:host { padding: 1rem 0.75rem; max-width: 100%; }
.page-title { font-size: 1.25rem; }
.page-subtitle { font-size: 0.8125rem; margin-bottom: 1.25rem; }
.step-card { flex-direction: column; gap: 0.75rem; padding: 1rem; }
.step-num { width: 28px; height: 28px; font-size: 0.8125rem; }
.wallet-badge { padding: 0.75rem; gap: 0.5rem; }
.wallet-addr { font-size: 0.8125rem; word-break: break-all; }
.toggle-group { flex-wrap: wrap; }
.toggle-btn { font-size: 0.75rem; padding: 0.5rem 0.5rem; min-width: 0; }
.method-desc { display: none; }
}
@media (max-width: 480px) {
.method-toggle { padding: 0.5rem 0.625rem; }
.method-name { font-size: 0.8125rem; }
.field-row { flex-direction: column; }
.field-row > .field[style*="width:110px"] { width: 100% !important; }
.result-amount { font-size: 1.5rem; }
.result-desc { font-size: 0.875rem; }
.result-hint { font-size: 0.75rem; }
.qr-display { padding: 0.75rem; }
.qr-img { max-width: 220px; }
.share-row { flex-direction: column; gap: 0.375rem; }
.share-input { font-size: 0.6875rem; }
.action-row { flex-direction: column; }
.action-row .btn { width: 100%; }
.email-share { margin-top: 0.75rem; padding-top: 0.75rem; }
.btn-lg { padding: 0.75rem 1rem; font-size: 0.9375rem; }
}
@media (max-width: 380px) {
:host { padding: 0.75rem 0.5rem; }
.step-card { padding: 0.75rem; }
.toggle-btn { font-size: 0.6875rem; padding: 0.375rem 0.375rem; }
.result-amount { font-size: 1.25rem; }
.qr-img { max-width: 180px; }
.input { font-size: 0.8125rem; padding: 0.5rem 0.625rem; }
}
`;
}