fix(settings): restore background swatch grid layout; verify N4 poll fix
- Add grow="Yes" to ChatBgGrid and SeasonalBgGrid containers so they expand to fill their flex parent — without it the Box shrank to one column (~76px wide) because folds Box defaults to display:flex and the wrapper is a flex-row with no explicit width. - Mark N4 (PollContent) FIXED ✅ VERIFIED in LOTUS_BUGS.md after confirmed pass on default Cinny themes and Lotus TDS. - Mark B1 and B4 PASS in LOTUS_TESTING.md. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+1
-1
@@ -301,7 +301,7 @@ This document tracks identified bugs, edge cases, and architectural discrepancie
|
||||
#### N4. `PollContent` Vote Buttons — Entirely Outside the Folds Design System
|
||||
|
||||
- **File:** `src/app/components/message/content/PollContent.tsx`
|
||||
- **Status:** **FIXED ⚠️ UNTESTED** (`caf6318a`) — needs verification: create a poll, then view/vote on it under a **non-TDS theme** (e.g. default Cinny dark/light) and confirm borders, selected state, and progress fill are all visible.
|
||||
- **Status:** **FIXED ✅ VERIFIED** (`caf6318a`) — confirmed renders correctly on default Cinny themes and with Lotus TDS enabled; borders, selected state, and progress fill all visible.
|
||||
- **Issue:** Each poll answer is a native `<button>` with ~15 hardcoded inline style properties using undefined CSS variables (`--accent-cyan`, `--accent-cyan-dim`, `--accent-cyan-border`, `--border-color`). Checkbox/radio indicators, percentage spans, and the poll label used raw pixel/rem font sizes (`0.68rem`, `0.78rem`, `0.88rem`) and hardcoded `rgba()`/`#fff`. None of those vars exist outside TDS mode — the component rendered unstyled (invisible borders / no selected/progress state) on every non-TDS theme.
|
||||
- **Root Cause:** Custom implementation that bypassed folds tokens entirely.
|
||||
- **Fix Applied:** Kept the `<button>` structure (the progress-bar-behind-text affordance has no folds `Button` equivalent) but made every value theme-reactive: `color.Primary.*` for selected/indicator state, `color.SurfaceVariant.*` for the resting surface + progress fill, `config.*` for radii/spacing/border-width, and folds `<Text>` for the option label, percentage, and section label (dropping the raw rem sizes and `opacity` hacks). The duplicate checkbox/radio indicator spans were merged into one.
|
||||
|
||||
+2
-2
@@ -126,7 +126,7 @@ This guards against a permanently-stuck "Loading…" call. Also covers the N96 b
|
||||
|
||||
This was the actual bug: poll buttons used undefined CSS variables, so on the **default (non-Lotus-Terminal) themes** they rendered with invisible borders / no selected state.
|
||||
|
||||
### B1. Poll renders on a default theme
|
||||
### B1. Poll renders on a default theme — ✅ PASS
|
||||
|
||||
1. Switch to a **default Cinny theme** (Settings → Appearance — **not** Lotus Terminal / TDS). Test both a **dark** and a **light** theme.
|
||||
2. In any room, create a poll (composer → poll button): a **single-choice** poll with 3 options.
|
||||
@@ -154,7 +154,7 @@ This was the actual bug: poll buttons used undefined CSS variables, so on the **
|
||||
- Indicators are **square checkboxes** (not circles); selected ones show a **✓** that's legible against the filled box.
|
||||
- You can select **several** options; each shows its own progress fill.
|
||||
|
||||
### B4. Lotus Terminal theme regression
|
||||
### B4. Lotus Terminal theme regression — ✅ PASS
|
||||
|
||||
1. Switch to **Lotus Terminal / TDS** theme and re-open a poll.
|
||||
**Expected:** still looks correct (the fix uses theme tokens, so the TDS accent should now drive it) — no worse than before.
|
||||
|
||||
@@ -1668,6 +1668,7 @@ function SeasonalBgGrid({
|
||||
}) {
|
||||
return (
|
||||
<Box
|
||||
grow="Yes"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,
|
||||
@@ -1734,6 +1735,7 @@ function ChatBgGrid() {
|
||||
|
||||
return (
|
||||
<Box
|
||||
grow="Yes"
|
||||
style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: `repeat(auto-fill, minmax(${toRem(76)}, 1fr))`,
|
||||
|
||||
Reference in New Issue
Block a user