Skip to content

Fix docs preview slider collapse, auto-sync Mintlify cache#415

Merged
jlowin merged 3 commits intomainfrom
fix/docs-preview-slider-collapse
Apr 9, 2026
Merged

Fix docs preview slider collapse, auto-sync Mintlify cache#415
jlowin merged 3 commits intomainfrom
fix/docs-preview-slider-collapse

Conversation

@jlowin
Copy link
Copy Markdown
Member

@jlowin jlowin commented Apr 9, 2026

Sliders rendered in docs <ComponentPreview> blocks were collapsing to a 12px thumb with no track. The cause turned out to be the preview shadow-DOM wrapper in embed.tsx, which uses display: flex; justify-content: center; align-items: center to center the preview inside its card. That makes the prefab root Div a flex item sized to max-content, so anything inside the cascade using width: 100% (sliders, progress bars, anything that wants to fill) ends up resolving against a content-sized parent and collapses. The playground doesn't hit this because it mounts into a normal block element with max-width.

Fix is one rule: [data-prefab-mount] > .pf-app-root { width: 100%; }. The flex wrapper still handles vertical centering, but horizontal sizing now cascades like normal block layout. While I was in custom-handlers.mdx, I also modernized the examples to the idiomatic PrefabApp context-manager pattern with js_pipes / js_actions defined as dicts above:

js_pipes = {
    "stars": """(value) => '★'.repeat(Math.floor(value))""",
}

with PrefabApp(js_pipes=js_pipes) as app:
    with Column(gap=2):
        with Row(css_class="items-center gap-4"):
            Slider(name="rating", value=3, min=0, max=5, step=0.5)
            Text("{{ rating | stars }}", bold=True)

Verifying the fix surfaced a separate annoyance: Mintlify's dev server copies docs/ static assets into ~/.mintlify/mint/apps/client/public/ once at startup and serves from the cache. Edits to renderer chunks or playground.html aren't visible until the dev server restarts because Mintlify only watches MDX. The second commit teaches build-docs and build-playground to mirror the affected assets straight into that cache, so renderer/playground iterations show up on the next page reload — no more manual restart. It's a no-op when Mintlify hasn't been run locally, and the build helpers are extracted into a new build_helpers module to keep cli.py under its line limit.

jlowin added 2 commits April 9, 2026 10:43
The shadow-DOM preview wrapper centers content with display: flex,
which made the prefab root Div a flex item sized to max-content.
Anything inside using width: 100% (sliders, progress bars) collapsed
because the parent chain had no concrete width to resolve against.

Force the root to fill the mount with `[data-prefab-mount] >
.pf-app-root { width: 100%; }`. The flex wrapper still handles
vertical centering, but horizontal sizing now cascades like a normal
block layout — matching how the playground already works.

Also modernize the custom-handlers.mdx examples to use PrefabApp as
a context manager with js_pipes / js_actions defined as dicts above,
which is the idiomatic pattern.
Mintlify copies docs/ static assets into ~/.mintlify/.../public/
once at server startup and serves from the cache.  Edits to docs/
renderer chunks or playground.html aren't picked up until the dev
server restarts — Mintlify only watches MDX, not arbitrary public
files.

Mirror our generated assets into the cache as part of build-docs and
build-playground so renderer/playground iterations show up on the
next page reload.  No-op when Mintlify hasn't been run locally.

Also extract the build helper functions out of cli.py into a new
build_helpers module to keep cli.py under its line limit.
@marvin-context-protocol marvin-context-protocol Bot added bug Something isn't working. Reports of errors, unexpected behavior, or broken functionality. renderer Related to the TypeScript/React renderer. labels Apr 9, 2026
The previous version of sync_to_mintlify_cache would happily overwrite
files in ~/.mintlify/.../public/ even when the cache was currently
serving a different docs project (anyone using Mintlify on something
other than Prefab). Mostly harmless leftover files, but gross.

Compare the `name` field of docs/docs.json against the cached copy
Mintlify writes to src/_props/docs.json when it loads a project. If
they don't match — or if either file is unreadable — leave the cache
alone.
@jlowin jlowin merged commit cb605f3 into main Apr 9, 2026
9 checks passed
@jlowin jlowin deleted the fix/docs-preview-slider-collapse branch April 9, 2026 14:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working. Reports of errors, unexpected behavior, or broken functionality. renderer Related to the TypeScript/React renderer.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant