Repository navigation
feat: let the editor fit a narrow, phone-sized container - #95
Open
alirezamhi wants to merge 1 commit into
Open
alirezamhi wants to merge 1 commit into
alirezamhi wants to merge 1 commit into
Conversation
A flex item defaults to `min-width: auto`, which is a floor at its content's min-content width: it refuses to shrink below what it holds. The editor's content is far wider than any phone — the sticker and shape panels lay hundreds of tiles out in rows that never wrap, measured at ~13,600px of min-content — so in a 375px viewport the container did not constrain the editor. The editor stretched the container, the container stretched its parent, and the page grew a horizontal scrollbar: the tool rail was pushed off-screen and the whole UI read as zoomed in. Only ~1 of the 8 tool icons stayed reachable. Both the wrapper and the container now default to `min-width: 0`, so a narrow container really does constrain the editor and those wide rows scroll inside their own panel. `style` / `wrapperStyle` still override it, matching the existing "flex first, a default the consumer can override" contract, so this is not a behaviour change for a container wide enough to hold the editor anyway. Also add `className` and `wrapperClassName`. The editor's own chrome belongs to the embed bundle, so the only way to rearrange it for a phone is a breakpoint of the consumer's — and a media query cannot be expressed in the `style` / `wrapperStyle` objects this component already accepts. The class names are the missing hook; `editorId` remains the id-based one. The README's new "Sizing and mobile" section states the three rules: the wrapper never widens its parent, the container needs a definite height (`minHeight` defaults to 500, so a full-height layout passes 0 or '100%'), and the embed's chrome is adapted through a breakpoint.
|
Someone is attempting to deploy a commit to the Unlayer Team on Vercel. A member of the Team first needs to authorize it. |
Author
This branch has not been deployed
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.


What
min-width: 0on both container divs, so the editor can never stretch the page it is embedded in.classNameandwrapperClassNameon the container and the wrapper.Why
The component renders
display: flexwith aflex: 1container, and a flex item defaults tomin-width: auto— a floor at its content's min-content width, which it refuses to shrink below.This editor's content is far wider than any phone: the sticker and shape panels lay hundreds of
tiles out in rows that never wrap, measured at 13,634px of min-content.
In the embed's default layout that floor stays hidden, because the panel is
shrink-0withmax-width: calc(100% - 4.5rem): its width is capped by its parent, so the huge content minimumnever becomes the container's floor. But a phone has no room for a 288px panel beside the canvas, so
any mobile layout has to stack the panel. The moment it does, the panel's width comes from the
cross-axis stretch, its 13,634px minimum becomes the container's, the container becomes 13,634px
wide and the page grows a horizontal scrollbar.
Measured in this repo's own demo (
pnpm --dir demo dev), 375px viewport, sticker panel open, withonly the two layout rules a phone layout needs (
flex-direction: columnon the panel row,width: 100%on the panel):min-widthdocumentElement.scrollWidthauto(current)0(this PR)36 viewports wide: the tool rail is pushed off-screen and about 1 of the 8 tool icons stays
reachable. With the fix the container holds at the viewport width and the sticker rows keep their
13,634px — scrolling inside their own panel, which is how the embed already treats them.
Also: the class names
Rearranging the embed's chrome for a phone needs a breakpoint, and a breakpoint needs a selector: a
media query cannot be expressed in the
style/wrapperStyleobjects the component alreadyaccepts, and inline styles cannot express one either.
className/wrapperClassNameare thathook;
editorIdcovers the id-based case.Notes
min-width: 0is written before the spread, matching the existing "flex first: a default theconsumer's style can override" contract from the
flexdefault — so it is not a behaviour changefor a container already wide enough to hold the editor, and
style/wrapperStylecan restorethe previous behaviour.
minWidthoverriding it). Suite at 76 passed, andthe 100% coverage thresholds still hold.
pnpm lint,pnpm typecheck,pnpm build,pnpm test:coverage, and the demo'stypecheck/build.Fixes #94