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

Fix mobile layout on payment page — center content and prevent overflow 

- Add margin: 0 auto to center the page instead of left-aligning
- Add overflow-wrap/word-break on wallet addresses, tx hashes, URLs
- Add min-width: 0 + text-overflow on share input to prevent flex overflow
- Comprehensive mobile breakpoints at 600px and 380px for all sections
  (staging banner, recipient info, header, amount, tabs, footer)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-12 22:41:37 +00:00
parent 61f5544b4e
commit 73431d7a88
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
modules/rcart/components/folk-payment-page.ts
View File

@ -669,7 +669,7 @@ class FolkPaymentPage extends HTMLElement {
private getStyles(): string {
return `
:host { display: block; padding: 1.5rem; width: 100%; max-width: 560px; -webkit-tap-highlight-color: transparent; }
:host { display: block; padding: 1.5rem; width: 100%; max-width: 560px; margin: 0 auto; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; word-wrap: break-word; }
* { box-sizing: border-box; }
button, a, input, select, textarea, [role="button"] { touch-action: manipulation; }
@ -678,7 +678,7 @@ class FolkPaymentPage extends HTMLElement {
.staging-banner { background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3); color: #fbbf24; border-radius: 8px; padding: 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.5; margin-bottom: 1rem; text-align: center; }
.recipient-info { color: var(--rs-text-secondary); font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.25rem; padding: 0.75rem 1rem; background: var(--rs-bg-surface); border-radius: 8px; border: 1px solid var(--rs-border); }
.recipient-info strong { color: var(--rs-text-primary); }
.recipient-info code { font-size: 0.8125rem; background: rgba(255,255,255,0.06); padding: 0.125rem 0.375rem; border-radius: 4px; }
.recipient-info code { font-size: 0.8125rem; background: rgba(255,255,255,0.06); padding: 0.125rem 0.375rem; border-radius: 4px; word-break: break-all; }
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.title { color: var(--rs-text-primary); font-size: 1.25rem; font-weight: 700; margin: 0; }
@ -748,7 +748,7 @@ class FolkPaymentPage extends HTMLElement {
.field-error { color: #f87171; font-size: 0.8125rem; margin-top: 0.75rem; }
.success-msg { color: #4ade80; font-size: 1rem; font-weight: 600; text-align: center; margin-bottom: 0.5rem; }
.tx-hash { color: var(--rs-text-secondary); font-size: 0.8125rem; text-align: center; font-family: monospace; }
.tx-hash { color: var(--rs-text-secondary); font-size: 0.8125rem; text-align: center; font-family: monospace; word-break: break-all; }
.confirmation { text-align: center; padding: 2rem 1rem; }
.confirm-icon { font-size: 3rem; color: #4ade80; margin-bottom: 0.5rem; }
@ -766,30 +766,46 @@ class FolkPaymentPage extends HTMLElement {
.qr-section { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.qr-code { border-radius: 8px; background: #fff; padding: 8px; }
.share-url { display: flex; gap: 0.5rem; width: 100%; }
.share-input { flex: 1; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--rs-input-border); background: var(--rs-input-bg); color: var(--rs-input-text); font-size: 0.75rem; font-family: monospace; }
.share-input { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border-radius: 8px; border: 1px solid var(--rs-input-border); background: var(--rs-input-bg); color: var(--rs-input-text); font-size: 0.75rem; font-family: monospace; overflow: hidden; text-overflow: ellipsis; }
.loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary); }
.error { text-align: center; padding: 3rem; color: #f87171; }
@media (max-width: 600px) {
:host { padding: 1.25rem 1rem; }
}
@media (max-width: 480px) {
:host { padding: 1rem; }
.header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
:host { padding: 1rem 0.75rem; }
.staging-banner { font-size: 0.75rem; padding: 0.625rem 0.75rem; }
.recipient-info { font-size: 0.8125rem; padding: 0.625rem 0.75rem; }
.header { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-bottom: 1rem; }
.title { font-size: 1.125rem; }
.amount { font-size: 1.5rem; }
.amount-input { font-size: 1.25rem; width: 120px; }
.amount-token { font-size: 1rem; }
.tab { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
.transak-iframe { height: min(500px, 70vh); }
.description { font-size: 0.875rem; padding: 0.625rem; }
.tab { padding: 0.625rem 0.5rem; font-size: 0.8125rem; }
.tab-content { min-height: 140px; }
.transak-iframe { height: min(500px, 70vh); }
.confirmation { padding: 1.5rem 0.5rem; }
.confirm-details { font-size: 0.8125rem; }
.share-url { flex-direction: column; }
.share-input { font-size: 0.6875rem; }
.toggle-group { flex-wrap: wrap; }
.toggle-btn { padding: 0.375rem 0.625rem; font-size: 0.75rem; }
.footer { margin-top: 1.5rem; padding-top: 1rem; }
.payer-type-chooser { padding: 0.5rem; }
}
@media (max-width: 380px) {
:host { padding: 0.75rem 0.5rem; }
.staging-banner { font-size: 0.6875rem; padding: 0.5rem; }
.recipient-info { font-size: 0.75rem; padding: 0.5rem; }
.recipient-info code { font-size: 0.6875rem; }
.title { font-size: 1rem; }
.amount { font-size: 1.25rem; }
.amount-input { font-size: 1rem; width: 100px; padding: 0.375rem 0.5rem; }
.tab { font-size: 0.75rem; padding: 0.5rem 0.375rem; }
.tab-desc { font-size: 0.8125rem; }
.btn { font-size: 0.8125rem; padding: 0.5rem 0.75rem; }
.confirm-icon { font-size: 2rem; }
.qr-code { width: 150px; }
}
`;
}