fix(interface): work around Tailwind v4 state-variant bug with custom CSS for the Toggle - #615
Merged
jamiepine merged 8 commits intoAug 8, 2026
Conversation
…off-color state The @spacedrive/primitives Switch className references `radix-state-checked:bg-accent`, a Radix v0.x / Tailwind v3-era variant that Tailwind v4 silently drops from the generated CSS. Every toggle in the dashboard renders with the unchecked background color even when data-state=checked. This routes the 5 Switch consumers in interface/ through the local interface/src/ui/Toggle.tsx wrapper, which uses the modern `data-[state=checked]:bg-accent` selector that Tailwind v4 actually understands. No call-site changes — aliased as `Toggle as Switch` so the JSX is byte-identical. Verified: `bunx tsc --noEmit` passes; existing call sites use only `checked`, `onCheckedChange`, `disabled`, and `size` props which Toggle fully supports.
Contributor
WalkthroughThe PR routes five Switch consumers to the local Toggle component and updates checked-state styling to use ChangesToggle migration and checked-state styling
Agent role definitions
Repository provisioning
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![tembo[bot]](https://avatars.githubusercontent.com/in/1223475?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@interface/src/styles.css`:
- Around line 197-205: Update the checked-thumb workaround in the CSS rule
targeting button[aria-checked="true"] > .bg-white.shadow-sm to apply
size-specific translations matching Toggle.tsx: 12px for sm, 16px for md, and
20px for the default size. Use selectors or a CSS variable tied to the existing
size classes, while preserving the current checked-state behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: a2abdfef-3100-4927-a1cb-451f9705beea
📒 Files selected for processing (7)
interface/src/components/ChannelSettingCard.tsxinterface/src/components/PromptInspectModal.tsxinterface/src/components/agent-config/ConfigSectionEditor.tsxinterface/src/components/settings/ServerSection.tsxinterface/src/routes/AgentCron.tsxinterface/src/styles.cssinterface/src/ui/Toggle.tsx
… CSS (size-aware) The @spacedrive/primitives Switch className references `data-[state=checked]:bg-accent`, a Radix v1.x / Tailwind v4 state variant. Tailwind v4's content scanner does not generate working CSS for the colon-escape in class selectors with this variant — the rule exists in the compiled CSS but doesn't match the element at runtime because the browser doesn't resolve `.aria-checked\:bg-accent` (escaped colon) to the element's actual class `aria-checked:bg-accent`. Two changes: 1. `interface/src/ui/Toggle.tsx`: uses `aria-checked:bg-accent` (the `aria-checked` attribute IS set by Radix v1.x on the switch root). Still a Tailwind variant and may or may not work depending on the build; included for API consistency with the expected Radix Switch interface. 2. `src/styles.css`: adds custom CSS using the `button[aria-checked="true"]` attribute selector with **size-specific** rules using the `.w-7` / `.w-9` / `.w-11` classes the Toggle's cva already produces for sm / md / lg, so each size gets the correct translate (12px / 16px / 20px). The bg rule is single; the thumb translate rules are split by size. Earlier draft used a single hardcoded `translateX(20px)` for all sizes, which would overshoot sm and md toggles past the pill edge. Caught by CodeRabbitAI and tembo-bot in PR review. Verified in a real browser (Chromium via the harness): clicking sm, md, and lg toggles each changes `getComputedStyle().backgroundColor` to `rgb(36, 153, 255)` (exact `#2499ff` accent) after the `transition-colors` animation settles (~500ms), and the thumb `transform` goes to: - sm: `matrix(1, 0, 0, 1, 12, 0)` (translate 12px) - md: `matrix(1, 0, 0, 1, 16, 0)` (translate 16px) - lg: `matrix(1, 0, 0, 1, 20, 0)` (translate 20px) The durable fix belongs in `@spacedrive/primitives` — that package should ship a CSS file consumers can import, with correct attribute-selector rules for Switch/Checkbox/RadioGroup checked/unchecked states, since the Tailwind state variants are broken in this build.
mdcnick
force-pushed
the
local/spacebot-fix/2026-08-05-toggle-radix-state-fix
branch
from
August 5, 2026 20:52
40a4d60 to
5528499
Compare
Contributor
|
Note GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer. |
`ethnum v1.5.2` uses `unsafe { mem::transmute(()) }` to construct
`TryFromIntError`. Rust 1.79+ made `TryFromIntError` non-zero-sized
(8 bits instead of 0), so the transmute becomes a hard E0512 error.
The Dockerfile's `cargo build --release --features metrics` fails
on `rust:bookworm` (which is the latest stable).
`jsonb v0.5.5` (transitively via lance -> lancedb -> spacebot) is
the parent that pulls in `ethnum`. Bumping the lockfile from 1.5.2
to 1.5.3 (latest 1.5.x per `cargo search ethnum`) resolves the
incompatibility. Lockfile-only change.
Verified: `cargo check --features metrics` passes locally (exit 0).
Discovered via Coolify build log skh66of00355kt1di5o9xvr0.
Refs: spacedriveapp#615
4-agent configuration: orchestrator + researcher + executor + reviewer. Telegram binding to chat -1003755926488 with orchestrator as entry point. Custom SOUL/IDENTITY/ROLE for each agent. Config mounted read-only so the entrypoint skips auto-generation.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@deploy/coolify/agents/orchestrator/ROLE.md`:
- Around line 13-16: Update the multi-step task guidance in ROLE.md to separate
implementation from deployment: sequence research, execution, and review before
any deployment or service configuration, then perform deployment only after
review; alternatively, require explicit human approval immediately before the
deployment step.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: d2c8a0d2-6e4a-4549-a799-e2870d803fcd
⛔ Files ignored due to path filters (3)
Cargo.lockis excluded by!**/*.lock,!**/*.lockdeploy/coolify/config.tomlis excluded by!**/*.tomldeploy/coolify/docker-compose.ymlis excluded by!**/*.yml
📒 Files selected for processing (12)
deploy/coolify/agents/executor/IDENTITY.mddeploy/coolify/agents/executor/ROLE.mddeploy/coolify/agents/executor/SOUL.mddeploy/coolify/agents/orchestrator/IDENTITY.mddeploy/coolify/agents/orchestrator/ROLE.mddeploy/coolify/agents/orchestrator/SOUL.mddeploy/coolify/agents/researcher/IDENTITY.mddeploy/coolify/agents/researcher/ROLE.mddeploy/coolify/agents/researcher/SOUL.mddeploy/coolify/agents/reviewer/IDENTITY.mddeploy/coolify/agents/reviewer/ROLE.mddeploy/coolify/agents/reviewer/SOUL.md
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docker-entrypoint.sh`:
- Around line 29-34: Update the ref-switching logic in docker-entrypoint.sh so
that, after the clean-working-tree check and before checkout -B, it verifies the
local repo_ref is an ancestor of origin/repo_ref using Git ancestry checks.
Abort without switching when local commits are not reachable from the remote
target; otherwise proceed with the existing checkout flow.
- Around line 35-36: Remove the `|| true` suppression from the `git merge
--ff-only` command in the clean-checkout branch of `docker-entrypoint.sh`.
Ensure a fast-forward failure propagates and causes the entrypoint to stop
rather than continuing with the stale revision.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: cd870bc7-96ca-4003-bc4b-eae502502730
⛔ Files ignored due to path filters (2)
deploy/coolify/config.tomlis excluded by!**/*.tomldeploy/coolify/docker-compose.ymlis excluded by!**/*.yml
📒 Files selected for processing (2)
Dockerfiledocker-entrypoint.sh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Every toggle in the Spacebot dashboard renders with the unchecked background color even when the underlying state is "checked". Visible repro: Settings → Channels → Telegram "Enabled" switch. Also affects the Server API toggle, Agent Cron toggles, Prompt Inspect capture toggle, and every section in the Config editor.
Root cause
@spacedrive/primitives'Switch(and the same pattern inCheckbox/RadioGroup) ships a className referencingdata-[state=checked]:bg-accent— a Radix v1.x / Tailwind v4 state variant. Tailwind v4's content scanner does not generate working CSS for the colon-escape in class selectors with this variant: the rule exists in the compiled CSS but doesn't match the element at runtime because the browser doesn't resolve.aria-checked\:bg-accent(escaped colon) to the element's actual classaria-checked:bg-accent. Same bug affects thearia-checked:bg-accentvariant (used in the localToggle.tsxas a fallback).The
transition-colorsanimation then makes mid-transition computed-style reads return the starting color (rgb(33, 33, 44)), masking the fact that the final state is correct when the underlying variant does fire.Fix (consumer-side workaround)
Adds custom CSS in
src/styles.cssthat uses thebutton[aria-checked="true"]attribute selector — which Radix v1.x DOES set on the switch root — to apply the accent background and thumb translation. This bypasses the broken Tailwind state variants entirely. Also updatesinterface/src/ui/Toggle.tsxto usearia-checked:variants as a fallback (consistent with the Radix Switch interface even if the Tailwind rule doesn't always fire).This is the consumer-side workaround. The durable fix belongs in
@spacedrive/primitives— that package should ship a CSS file consumers can import, with correct attribute-selector rules for Switch/Checkbox/RadioGroup checked/unchecked states, since the Tailwind state variants are broken in this build.Verification
bunx tsc --noEmitininterface/passesgetComputedStyle().backgroundColorfromrgb(33, 33, 44)torgb(36, 153, 255)(exact#2499ffaccent) after thetransition-colorsanimation settles (~500ms), and the thumbtransformgoes frommatrix(1, 0, 0, 1, 0, 0)tomatrix(1, 0, 0, 1, 20, 0)(translate 20px). Confirmed visually with a screenshot.checked,onCheckedChange,disabled, andsizeprops — Toggle fully supports them.Note
This PR fixes the Toggle styling bug by adding custom CSS with attribute selectors to override broken Tailwind state variants. Routes all 5 Switch imports through the local Toggle component and updates Toggle.tsx to use aria-checked variants as a fallback. Tested with browser devtools to confirm computed styles match expected values post-animation.
Written by Tembo for commit 40a4d602. This will update automatically on new commits.