fix(layout): handle vertical spacers and narrow padding - #115
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: d2e6d82 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
4b3a187 to
1e23f2e
Compare
There was a problem hiding this comment.
🟢 Approval recommended
The changes are well-scoped to the reported layout issues and are backed by focused regression tests for the key edge cases.
Pull request overview
This PR fixes two layout edge cases in the Layout module: Flex.spacer now consumes space along the active flex axis (so it works correctly in Flex.col), and Container.make clamps horizontal padding so the container never exceeds its declared width (including narrow/zero widths).
Changes:
- Update flex child resolution so
Flex.spacerallocates height inFlex.col(rows) rather than width (cols). - Clamp
Container’s horizontal padding to fit within the declared container width, keepinginnerWidthand output width consistent. - Add targeted tests for weighted spacers, gaps, zero remaining space, and narrow/tuple padding; publish a patch changeset.
File summaries
| File | Description |
|---|---|
| packages/effect-boxes/tests/layout.test.ts | Adds regression tests for spacer allocation in rows/cols and container padding clamping. |
| packages/effect-boxes/src/internal/flex.ts | Makes spacer allocation axis-aware (rows for col, cols for row) and supports weighted spacers. |
| packages/effect-boxes/src/internal/container.ts | Clamps horizontal padding to ensure container output width never exceeds options.width. |
| .changeset/swift-animals-juggle.md | Declares a patch release describing the behavior fixes. |
Review details
- Files reviewed: 4/4 changed files
- Comments generated: 1
- Review effort level: Lite
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| Match.tag("Fill", (c) => | ||
| c.builder === spacerBuilder ? makeSpacer(size) : c.builder(size) | ||
| ), |
1e23f2e to
087b37a
Compare
087b37a to
aa641cb
Compare
aa641cb to
d2e6d82
Compare
Goal and scope
Make spacers consume the active Flex axis and keep narrow Containers within their declared width. Container height enforcement is out of scope.
Description
Vertical spacers now allocate rows instead of columns. Horizontal padding is capped when it cannot fit inside the requested width.
How to test
bun run --cwd packages/effect-boxes test tests/layout.test.ts.Review
Closes #103
Closes #105