Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

💡 Multi-line flex wrapping (flexWrap)

Open
#63 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
52/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
c, typescript
Domain
cli

Research direction

Run the failing test in test/flex-wrap.test.ts and compare the nm/repro/flex-wrap diff with main. Trace the layout group in ops.ts through the decode in src/clayterm.c:499 and the vendored clay/clay.h configuration. Done means wrap, nowrap, and wrap-reverse produce the requested line placement, with nowrap remaining the default.

Written by the indexing model from the issue text.

Description

enhancement

Is your feature request related to a problem?

A flex container lays every child out on a single main-axis line, so children that exceed the container's main-axis size overflow past it instead of breaking. In a row container 2 cells wide with children A (1 wide) and BC (2 wide), BC is placed at x:1 and overflows to x:3—past width:2—and the grid prints ABC on one row. There's no way to ask a container to wrap, which makes column-of-cards / tag-cloud layouts impossible without measuring and chunking children by hand on the JS side.

Describe the solution you'd like

A container set to wrap should start a new line when a child no longer fits along the main axis (accumulated child main size + gaps exceeds the container's main-axis size), stacking the lines along the cross axis. For the example above, BC should land at {x:0, y:1, width:2, height:1} and the grid should print A then BC on two rows.

open("root", {
  layout: {
    width: fixed(2),
    height: fixed(4),
    direction: "ltr",
    flexWrap: "wrap", // "nowrap" (default) | "wrap" | "wrap-reverse"
  },
});

flexWrap should mirror the CSS flex-wrap property. Default to "nowrap", support "wrap" and "wrap-reverse".

Describe alternatives you've considered

We can pre-measure children in JS, chunk them into rows by hand, and emit a column of explicit ltr rows. That falls apart the moment sizing is fit/grow (we'd be duplicating the renderer's own measurement) and it doesn't survive a resize without re-chunking.

Additional context

Failing test case on nm/repro/flex-wrap (test · diff).

A wrap field needs to thread through the wire format and the layout pass: the layout group in ops.ts, the layout decode in reduce (src/clayterm.c:499), and Clay_LayoutConfig in the vendored clay/clay.h, which is single-line today.

Dominant language
TypeScript
Stars
42
Forks
2
Avg merge
2d 5h
Merged PRs (30d)
12

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from bombshell-dev/tty

All issues in bombshell-dev/tty

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.