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

fix(rchoices): responsive tabs — icon-only on mobile to prevent overflow 

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Jeff Emmett 2026-03-16 17:11:49 -07:00
parent 14c183b992
commit 352ad33fff
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/rchoices/components/folk-choices-dashboard.ts
View File

@ -525,12 +525,13 @@ class FolkChoicesDashboard extends HTMLElement {
.demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--rs-primary); color: #fff; font-weight: 500; } .demo-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 999px; background: var(--rs-primary); color: #fff; font-weight: 500; }
/* Tabs */ /* Tabs */
.demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; margin-top: 4px; background: var(--rs-bg-page); border-radius: 10px; padding: 4px; } .demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; margin-top: 4px; background: var(--rs-bg-page); border-radius: 10px; padding: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.demo-tab { flex: 1; text-align: center; padding: 0.6rem 0.75rem; border-radius: 8px; border: none; background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.875rem; font-family: inherit; transition: all 0.15s; } .demo-tab { flex: 1 1 0; min-width: 0; text-align: center; padding: 0.5rem 0.5rem; border-radius: 8px; border: none; background: transparent; color: var(--rs-text-secondary); cursor: pointer; font-size: 0.8rem; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
.demo-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); } .demo-tab:hover { color: var(--rs-text-primary); background: var(--rs-bg-surface); }
.demo-tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); box-shadow: var(--rs-shadow-sm); } .demo-tab.active { background: var(--rs-bg-surface); color: var(--rs-text-primary); box-shadow: var(--rs-shadow-sm); }
.demo-tab-icon { margin-right: 6px; } .demo-tab-icon { margin-right: 4px; }
.demo-tab-label { } .demo-tab-label { }
@media (max-width: 480px) { .demo-tab-label { display: none; } .demo-tab-icon { margin-right: 0; } .demo-tab { flex: 0 0 auto; padding: 0.5rem 0.75rem; } }
/* Spider chart */ /* Spider chart */
.spider-wrap { display: flex; flex-direction: column; align-items: center; } .spider-wrap { display: flex; flex-direction: column; align-items: center; }