Fix docs preview slider collapse, auto-sync Mintlify cache#415
Merged
Conversation
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.
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.
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
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.
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 inembed.tsx, which usesdisplay: flex; justify-content: center; align-items: centerto center the preview inside its card. That makes the prefab root Div a flex item sized tomax-content, so anything inside the cascade usingwidth: 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 withmax-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 incustom-handlers.mdx, I also modernized the examples to the idiomaticPrefabAppcontext-manager pattern withjs_pipes/js_actionsdefined as dicts above: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 orplayground.htmlaren't visible until the dev server restarts because Mintlify only watches MDX. The second commit teachesbuild-docsandbuild-playgroundto 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 newbuild_helpersmodule to keepcli.pyunder its line limit.