diff --git a/modules/rcart/components/cart.css b/modules/rcart/components/cart.css index 7709abf..1a794bd 100644 --- a/modules/rcart/components/cart.css +++ b/modules/rcart/components/cart.css @@ -7,7 +7,8 @@ main { /* Center narrow form pages (payment request, payment page, group buy) */ main:has(folk-payment-request), main:has(folk-payment-page), -main:has(folk-group-buy-page) { +main:has(folk-group-buy-page), +main:has(folk-payments-dashboard) { display: flex; flex-direction: column; align-items: center; diff --git a/modules/rcart/components/folk-group-buy-page.ts b/modules/rcart/components/folk-group-buy-page.ts index fb14518..7b7383d 100644 --- a/modules/rcart/components/folk-group-buy-page.ts +++ b/modules/rcart/components/folk-group-buy-page.ts @@ -639,6 +639,22 @@ class FolkGroupBuyPage extends HTMLElement { .fill-visual { flex-direction: column; align-items: center; } .fill-visual__marker-label { display: none; } } + @media (max-width: 480px) { + :host { padding: 1rem 0.75rem; } + .hero { padding: 1rem; gap: 1rem; } + .hero-title { font-size: 1.375rem; } + .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } + .hero-stat-value { font-size: 1.125rem; } + .tier-commons { display: none; } + .tier-row { padding: 0.625rem 0.75rem; gap: 0.5rem; } + .tier-qty { font-size: 0.8125rem; min-width: 2.5rem; } + .tier-price { font-size: 0.8125rem; } + .sim-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; } + .sim-label { white-space: normal; } + .commons-controls { flex-direction: column; align-items: stretch; gap: 0.5rem; } + .pledge-panel { padding: 1rem; } + h3 { font-size: 0.9375rem; } + } `; } diff --git a/modules/rcart/components/folk-payment-page.ts b/modules/rcart/components/folk-payment-page.ts index c6f8dbe..bcae897 100644 --- a/modules/rcart/components/folk-payment-page.ts +++ b/modules/rcart/components/folk-payment-page.ts @@ -721,6 +721,24 @@ class FolkPaymentPage extends HTMLElement { .loading { text-align: center; padding: 3rem; color: var(--rs-text-secondary); } .error { text-align: center; padding: 3rem; color: #f87171; } + + @media (max-width: 480px) { + :host { padding: 1rem; } + .header { flex-direction: column; align-items: flex-start; gap: 0.5rem; } + .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; } + .confirmation { padding: 1.5rem 0.5rem; } + .confirm-details { font-size: 0.8125rem; } + .share-url { flex-direction: column; } + .share-input { font-size: 0.6875rem; } + .toggle-btn { padding: 0.375rem 0.625rem; font-size: 0.75rem; } + .footer { margin-top: 1.5rem; padding-top: 1rem; } + } `; } diff --git a/modules/rcart/components/folk-payment-request.ts b/modules/rcart/components/folk-payment-request.ts index f267de9..8afc649 100644 --- a/modules/rcart/components/folk-payment-request.ts +++ b/modules/rcart/components/folk-payment-request.ts @@ -643,8 +643,19 @@ class FolkPaymentRequest extends HTMLElement { .action-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } @media (max-width: 480px) { + :host { padding: 1rem; } + .page-title { font-size: 1.25rem; } + .page-subtitle { font-size: 0.8125rem; margin-bottom: 1.5rem; } .field-row { flex-direction: column; } .action-row { flex-direction: column; } + .toggle-btn { padding: 0.4375rem 0.5rem; font-size: 0.75rem; } + .method-toggle { padding: 0.5rem 0.625rem; gap: 0.5rem; } + .method-desc { display: none; } + .share-row { flex-direction: column; } + .share-input { font-size: 0.6875rem; } + .step-card { flex-direction: column; gap: 0.75rem; padding: 1rem; } + .result-amount { font-size: 1.5rem; } + .qr-img { max-width: 220px; } } `; } diff --git a/modules/rchoices/components/folk-choices-dashboard.ts b/modules/rchoices/components/folk-choices-dashboard.ts index 8c7587d..ea12111 100644 --- a/modules/rchoices/components/folk-choices-dashboard.ts +++ b/modules/rchoices/components/folk-choices-dashboard.ts @@ -261,6 +261,21 @@ class FolkChoicesDashboard extends HTMLElement { .vote-reset { padding: 0.5rem 1.25rem; border-radius: 8px; border: 1px solid var(--rs-border); background: var(--rs-bg-surface); color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; } .vote-reset:hover { border-color: var(--rs-error); color: #fca5a5; } .vote-status { text-align: center; margin-bottom: 1rem; font-size: 0.8rem; color: var(--rs-text-muted); } + + @media (max-width: 768px) { + .grid { grid-template-columns: 1fr; } + } + @media (max-width: 480px) { + :host { padding: 1rem; } + .rapp-nav { gap: 4px; } + .create-btn { padding: 0.375rem 0.75rem; font-size: 0.8125rem; } + .demo-tabs { gap: 2px; padding: 3px; } + .demo-tab { padding: 0.5rem; font-size: 0.8125rem; } + .rank-item { padding: 0.625rem 0.75rem; gap: 8px; } + .rank-name { font-size: 0.875rem; } + .vote-option { padding: 0.625rem 0.75rem; } + .spider-svg { max-width: 300px; } + }
diff --git a/modules/rfiles/components/folk-file-browser.ts b/modules/rfiles/components/folk-file-browser.ts index b65db7c..b9534c2 100644 --- a/modules/rfiles/components/folk-file-browser.ts +++ b/modules/rfiles/components/folk-file-browser.ts @@ -445,6 +445,21 @@ class FolkFileBrowser extends HTMLElement { .loading { text-align: center; color: #888; padding: 40px; } .card-form { margin-bottom: 20px; display: flex; flex-direction: column; gap: 8px; } .card-form-row { display: flex; gap: 8px; } + + @media (max-width: 768px) { + .file-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } + .card-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } + } + @media (max-width: 480px) { + .file-grid { grid-template-columns: 1fr; } + .card-grid { grid-template-columns: 1fr; } + .tabs { gap: 2px; } + .tab-btn { padding: 6px 12px; font-size: 13px; } + .upload-section { padding: 12px; } + .upload-row { flex-direction: column; align-items: stretch; } + .file-card { padding: 10px; } + .card-form-row { flex-direction: column; } + }
diff --git a/modules/rforum/components/folk-forum-dashboard.ts b/modules/rforum/components/folk-forum-dashboard.ts index 6f0fe1b..f19b63f 100644 --- a/modules/rforum/components/folk-forum-dashboard.ts +++ b/modules/rforum/components/folk-forum-dashboard.ts @@ -329,6 +329,18 @@ class FolkForumDashboard extends HTMLElement { @media (max-width: 768px) { .pricing { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } + .detail-grid { grid-template-columns: 1fr; } + } + @media (max-width: 480px) { + .rapp-nav { gap: 4px; } + .rapp-nav__title { font-size: 14px; } + .rapp-nav__btn { padding: 4px 10px; font-size: 12px; } + .instance-card { padding: 12px; } + .instance-name { font-size: 14px; } + .instance-meta { font-size: 11px; } + .detail-panel { padding: 14px; } + .detail-title { font-size: 16px; } + .log-step { font-size: 12px; } } diff --git a/modules/rinbox/components/folk-inbox-client.ts b/modules/rinbox/components/folk-inbox-client.ts index e2a8312..842e3cf 100644 --- a/modules/rinbox/components/folk-inbox-client.ts +++ b/modules/rinbox/components/folk-inbox-client.ts @@ -508,11 +508,26 @@ class FolkInboxClient extends HTMLElement { .sample-banner { padding: 8px 16px; background: rgba(99,102,241,0.12); border: 1px solid rgba(99,102,241,0.25); border-radius: 8px; color: #a5b4fc; font-size: 13px; text-align: center; margin-bottom: 12px; } - @media (max-width: 600px) { + @media (max-width: 768px) { .mailbox-grid { grid-template-columns: 1fr; } - .thread-from { max-width: 100px; } - .thread-row { flex-wrap: wrap; gap: 4px; } .help-grid { grid-template-columns: 1fr; } + .thread-row { flex-wrap: wrap; gap: 4px; } + .thread-from { max-width: 100px; } + } + @media (max-width: 480px) { + .rapp-nav { gap: 0.25rem; } + .nav-btn { padding: 4px 8px; font-size: 12px; } + .inbox-header { padding: 0.625rem 0.75rem; gap: 0.5rem; } + .inbox-header-name { font-size: 0.85rem; } + .thread-row { padding: 0.625rem 0.75rem; } + .thread-subject { font-size: 0.8125rem; } + .thread-preview { font-size: 0.75rem; } + .filter-bar { padding: 0.5rem 0.75rem; gap: 0.125rem; } + .filter-btn { padding: 4px 8px; font-size: 11px; } + .help-panel { padding: 1.25rem; } + .help-title { font-size: 1.25rem; } + .compose-panel { padding: 12px; } + .inbox-card { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem; } }
diff --git a/modules/rnotes/components/folk-notes-app.ts b/modules/rnotes/components/folk-notes-app.ts index 860c376..be6caf1 100644 --- a/modules/rnotes/components/folk-notes-app.ts +++ b/modules/rnotes/components/folk-notes-app.ts @@ -2652,6 +2652,27 @@ Gear: EUR 400 (10%)

Maya is tracking expenses in rF .tiptap-container .tiptap s { color: var(--rs-text-muted); } .tiptap-container .tiptap u { text-underline-offset: 3px; } + @media (max-width: 768px) { + .grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } + .notebook-card { min-height: 100px; padding: 12px 12px 12px 16px; } + .editor-wrapper .editable-title { padding: 12px 14px 0; } + .tiptap-container .tiptap { padding: 14px 16px; } + .note-item { padding: 10px 12px; gap: 8px; } + } + @media (max-width: 480px) { + .grid { grid-template-columns: 1fr; } + .rapp-nav { gap: 4px; } + .rapp-nav__btn { padding: 5px 10px; font-size: 12px; } + .search-bar { font-size: 13px; padding: 8px 10px; } + .notebook-card__title { font-size: 14px; } + .editable-title { font-size: 18px; } + .tiptap-container .tiptap { font-size: 14px; padding: 12px 14px; min-height: 200px; } + .editor-toolbar { padding: 3px 4px; gap: 1px; } + .toolbar-btn { width: 26px; height: 24px; } + .note-actions-bar { flex-wrap: wrap; gap: 6px; } + .note-action-btn { padding: 5px 10px; font-size: 11px; } + } + /* Placeholder */ .tiptap-container .tiptap p.is-editor-empty:first-child::before { content: attr(data-placeholder); diff --git a/modules/rtasks/components/folk-tasks-board.ts b/modules/rtasks/components/folk-tasks-board.ts index 31e04dd..2f1e550 100644 --- a/modules/rtasks/components/folk-tasks-board.ts +++ b/modules/rtasks/components/folk-tasks-board.ts @@ -329,6 +329,16 @@ class FolkTasksBoard extends HTMLElement { @media (max-width: 768px) { .board { flex-direction: column; overflow-x: visible; } .column { min-width: 100%; max-width: 100%; } + .workspace-grid { grid-template-columns: 1fr; } + } + @media (max-width: 480px) { + .rapp-nav { gap: 4px; } + .rapp-nav__title { font-size: 14px; } + .rapp-nav__btn { padding: 4px 10px; font-size: 12px; } + .column-header { padding: 8px; font-size: 12px; } + .card { padding: 10px; } + .card-title { font-size: 13px; } + .card-meta { font-size: 10px; } } diff --git a/modules/rvote/components/folk-vote-dashboard.ts b/modules/rvote/components/folk-vote-dashboard.ts index 6a666c2..4943b97 100644 --- a/modules/rvote/components/folk-vote-dashboard.ts +++ b/modules/rvote/components/folk-vote-dashboard.ts @@ -608,6 +608,35 @@ class FolkVoteDashboard extends HTMLElement { .trend-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } + + @media (max-width: 768px) { + .tally { gap: 12px; } + .detail { padding: 16px; } + .detail-title { font-size: 17px; } + .trend-section { padding: 12px 14px; } + } + @media (max-width: 480px) { + .header-title { font-size: 15px; } + .space-card { padding: 14px; } + .space-name { font-size: 16px; } + .space-meta { gap: 10px; } + .proposal-body { padding: 10px 12px; } + .proposal-title { font-size: 14px; } + .proposal-desc { font-size: 12px; } + .vote-col { width: 44px; padding: 8px 4px; } + .vote-chevron { width: 28px; height: 24px; } + .vote-score { font-size: 14px; } + .score-row { gap: 8px; flex-wrap: wrap; } + .vote-row { gap: 4px; } + .vote-btn { padding: 5px 10px; font-size: 12px; } + .tally-value { font-size: 18px; } + .meta { gap: 8px; font-size: 11px; } + .create-form { padding: 14px; } + .form-actions { flex-direction: column; } + .qv-weights { gap: 3px; } + .qv-weight { font-size: 10px; padding: 2px 6px; } + .trend-legend { gap: 8px; } + } ${this.error ? `

${this.esc(this.error)}
` : ""} diff --git a/modules/rwallet/components/folk-wallet-viewer.ts b/modules/rwallet/components/folk-wallet-viewer.ts index 2bafe8c..e46c8b5 100644 --- a/modules/rwallet/components/folk-wallet-viewer.ts +++ b/modules/rwallet/components/folk-wallet-viewer.ts @@ -1279,6 +1279,13 @@ class FolkWalletViewer extends HTMLElement { } @media (max-width: 480px) { .features { grid-template-columns: 1fr; } + .hero-title { font-size: 18px; } + .hero-subtitle { font-size: 13px; } + .top-tabs { gap: 2px; } + .view-tabs { gap: 2px; } + .aggregate-stats { grid-template-columns: 1fr 1fr; gap: 8px; } + .wallet-item { padding: 8px; } + .my-wallets { padding: 12px; } } `; }