diff --git a/modules/rcart/components/folk-payment-request.ts b/modules/rcart/components/folk-payment-request.ts index 99b0f7a..4b35a75 100644 --- a/modules/rcart/components/folk-payment-request.ts +++ b/modules/rcart/components/folk-payment-request.ts @@ -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; } } `; }