From b80275abcb1f339863386d3a64df108973cc4a25 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Mon, 16 Mar 2026 16:47:10 -0700
Subject: [PATCH] fix(rchoices): fix tab overlap + show icons-only on mobile

Adds margin-top to demo-tabs to prevent overlap with shell nav.
Hides tab labels on narrow screens (<=480px), showing only icons
so all 4 tabs fit. Bumps JS cache to v=4.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rchoices/components/folk-choices-dashboard.ts | 7 +++++--
 modules/rchoices/mod.ts                               | 2 +-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/modules/rchoices/components/folk-choices-dashboard.ts b/modules/rchoices/components/folk-choices-dashboard.ts
index c6cb419..21cd40a 100644
--- a/modules/rchoices/components/folk-choices-dashboard.ts
+++ b/modules/rchoices/components/folk-choices-dashboard.ts
@@ -525,11 +525,12 @@ 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; }
 
 			/* Tabs */
-			.demo-tabs { display: flex; gap: 4px; margin-bottom: 1.5rem; 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; }
 			.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: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-icon { margin-right: 6px; }
+			.demo-tab-label { }
 
 			/* Spider chart */
 			.spider-wrap { display: flex; flex-direction: column; align-items: center; }
@@ -580,6 +581,8 @@ class FolkChoicesDashboard extends HTMLElement {
 				.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; }
+				.demo-tab-label { display: none; }
+				.demo-tab-icon { margin-right: 0; font-size: 1.1rem; }
 				.rank-item { padding: 0.625rem 0.75rem; gap: 8px; }
 				.rank-name { font-size: 0.875rem; }
 				.vote-option { padding: 0.625rem 0.75rem; }
@@ -594,7 +597,7 @@ class FolkChoicesDashboard extends HTMLElement {
 		</div>
 
 		<div class="demo-tabs">
-			${tabs.map((t) => `<button class="demo-tab${this.demoTab === t.key ? " active" : ""}" data-tab="${t.key}"><span class="demo-tab-icon">${t.icon}</span>${this.esc(t.label)}</button>`).join("")}
+			${tabs.map((t) => `<button class="demo-tab${this.demoTab === t.key ? " active" : ""}" data-tab="${t.key}"><span class="demo-tab-icon">${t.icon}</span><span class="demo-tab-label">${this.esc(t.label)}</span></button>`).join("")}
 		</div>
 
 		<div class="demo-content">
diff --git a/modules/rchoices/mod.ts b/modules/rchoices/mod.ts
index bc4c1c6..29ae99f 100644
--- a/modules/rchoices/mod.ts
+++ b/modules/rchoices/mod.ts
@@ -56,7 +56,7 @@ routes.get("/", (c) => {
 		modules: getModuleInfoList(),
 		theme: "dark",
 		body: `<folk-choices-dashboard space="${spaceSlug}"></folk-choices-dashboard>`,
-		scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=3"></script>`,
+		scripts: `<script type="module" src="/modules/rchoices/folk-choices-dashboard.js?v=4"></script>`,
 		styles: `<link rel="stylesheet" href="/modules/rchoices/choices.css">`,
 	}));
 });