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; } + }
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 ? `