Two separate problems in demo/src/styles.css.
1. Not responsive — the file contains no @media query at all
.sidebar is a hard width: 240px; flex-shrink: 0, and .body is a plain row flexbox. On a phone that leaves the editor roughly 135px wide next to a sidebar that can't shrink. .preview is also a fixed width: 320px pinned to the bottom-right, which overlaps most of a small viewport.
The sidebar toggle in the top bar helps, but it defaults to open (useState(true) in App.tsx), so the first paint on mobile is the broken one.
Worth adding a breakpoint that collapses the sidebar by default (or overlays it) below ~768px, and lets .preview go full-width.
2. The page chrome ignores the theme toggle
The demo has a Light/Dark selector that drives options.theme, but the surrounding page is hardcoded:
html, body, #root are hardcoded light (background: #fff, color-scheme: light).topbar and .sidebar are hardcoded dark (#16181d, color-scheme: dark).preview card is hardcoded white
So switching the editor to dark produces a dark editor inside light page chrome, and switching to light still leaves a permanently dark sidebar and top bar. Since the demo is the thing people look at to decide whether the theming works, it currently undersells it.
Driving the demo's own palette off the same theme state (CSS custom properties + a data-theme attribute on <html>) would make the toggle actually demonstrate something.
Two separate problems in
demo/src/styles.css.1. Not responsive — the file contains no
@mediaquery at all.sidebaris a hardwidth: 240px; flex-shrink: 0, and.bodyis a plain row flexbox. On a phone that leaves the editor roughly 135px wide next to a sidebar that can't shrink..previewis also a fixedwidth: 320pxpinned to the bottom-right, which overlaps most of a small viewport.The sidebar toggle in the top bar helps, but it defaults to open (
useState(true)inApp.tsx), so the first paint on mobile is the broken one.Worth adding a breakpoint that collapses the sidebar by default (or overlays it) below ~768px, and lets
.previewgo full-width.2. The page chrome ignores the theme toggle
The demo has a Light/Dark selector that drives
options.theme, but the surrounding page is hardcoded:html,body,#rootare hardcoded light (background: #fff,color-scheme: light).topbarand.sidebarare hardcoded dark (#16181d,color-scheme: dark).previewcard is hardcoded whiteSo switching the editor to
darkproduces a dark editor inside light page chrome, and switching tolightstill leaves a permanently dark sidebar and top bar. Since the demo is the thing people look at to decide whether the theming works, it currently undersells it.Driving the demo's own palette off the same
themestate (CSS custom properties + adata-themeattribute on<html>) would make the toggle actually demonstrate something.