Context
The Konsta UI v5 adaptive component layer was added in v2.4.0 (6226a79) to provide native iOS/Material look on mobile viewports. While the integration is architecturally complete, it causes layout conflicts with the existing Tailwind CSS v4 + Radix/shadcn styling that make it unusable in its current state.
What was tried
- Scoped CSS isolation — Added a
konsta-active class on <html> to scope base styles (border utilities, font, letter-spacing, border-radius) so they don't conflict with Konsta's own resets.
- Platform theme "none" bypass — Made
useKonstaOverride() respect "Standard" theme selection to fully disable Konsta rendering regardless of viewport width.
- Cross-component event system — Added
konsta-ui-changed custom event so all adaptive components re-evaluate immediately when the user toggles settings.
Despite these fixes, visual conflicts remain — Konsta's global CSS (konsta/react/theme.css) and component styles clash with the oklch color system, custom button classes, and ambient blob styling.
Current state (temporarily disabled)
All Konsta code is preserved but disabled:
useKonstaOverride() in apps/web/src/hooks/useKonstaOverride.ts — always returns false (original logic preserved in comments)- Platform theme dropdown and Konsta UI toggle in
SettingsView.tsx — commented out
Select, useKonstaToggle imports in SettingsView — commented out- 10 adaptive UI components (
button, card, checkbox, switch, slider, input, progress, select, tabs, dialog) — dormant, all gated behind useKonstaOverride() which returns false
KonstaApp wrapper in App.tsx — conditional on useKonsta, effectively dead codekonsta/react/theme.css import in index.css — still present but harmless (only sets unused --k-color-* variables).konsta-active scoping rules in index.css — present but class is never applied
To re-enable
- Restore
useKonstaOverride() logic (uncomment the original implementation)
- Uncomment Settings UI in
SettingsView.tsx (platform theme dropdown + Konsta toggle)
- Uncomment the
Select and useKonstaToggle imports
- Address root CSS conflicts — likely needs a more thorough isolation strategy (Shadow DOM, CSS layers, or stripping Konsta's global reset)
Key files
apps/web/src/hooks/useKonstaOverride.ts — master gateapps/web/src/hooks/usePlatformTheme.ts — theme selection + event dispatchapps/web/src/App.tsx — KonstaApp wrapper + konsta-active class toggleapps/web/src/index.css — CSS scoping rules + Konsta theme importapps/web/src/components/SettingsView.tsx — hidden UI controlsapps/web/src/components/ui/*.tsx — adaptive component wrappers
Labels
Enhancement / deferred
Context
The Konsta UI v5 adaptive component layer was added in v2.4.0 (
6226a79) to provide native iOS/Material look on mobile viewports. While the integration is architecturally complete, it causes layout conflicts with the existing Tailwind CSS v4 + Radix/shadcn styling that make it unusable in its current state.What was tried
konsta-activeclass on<html>to scope base styles (border utilities, font, letter-spacing, border-radius) so they don't conflict with Konsta's own resets.useKonstaOverride()respect "Standard" theme selection to fully disable Konsta rendering regardless of viewport width.konsta-ui-changedcustom event so all adaptive components re-evaluate immediately when the user toggles settings.Despite these fixes, visual conflicts remain — Konsta's global CSS (
konsta/react/theme.css) and component styles clash with the oklch color system, custom button classes, and ambient blob styling.Current state (temporarily disabled)
All Konsta code is preserved but disabled:
useKonstaOverride()inapps/web/src/hooks/useKonstaOverride.ts— always returnsfalse(original logic preserved in comments)SettingsView.tsx— commented outSelect,useKonstaToggleimports in SettingsView — commented outbutton,card,checkbox,switch,slider,input,progress,select,tabs,dialog) — dormant, all gated behinduseKonstaOverride()which returnsfalseKonstaAppwrapper inApp.tsx— conditional onuseKonsta, effectively dead codekonsta/react/theme.cssimport inindex.css— still present but harmless (only sets unused--k-color-*variables).konsta-activescoping rules inindex.css— present but class is never appliedTo re-enable
useKonstaOverride()logic (uncomment the original implementation)SettingsView.tsx(platform theme dropdown + Konsta toggle)SelectanduseKonstaToggleimportsKey files
apps/web/src/hooks/useKonstaOverride.ts— master gateapps/web/src/hooks/usePlatformTheme.ts— theme selection + event dispatchapps/web/src/App.tsx—KonstaAppwrapper +konsta-activeclass toggleapps/web/src/index.css— CSS scoping rules + Konsta theme importapps/web/src/components/SettingsView.tsx— hidden UI controlsapps/web/src/components/ui/*.tsx— adaptive component wrappersLabels
Enhancement / deferred