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

💡 Stretch sizing (fill the cross axis)

Open
#71 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
58/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
c, typescript
Domain
frontend

Research direction

Start with test/stretch-sizing.test.ts and the referenced diff, then trace decode_axis in src/clayterm.c and the sizing helpers and packAxis case in ops.ts. Follow the layout pass where cross-axis sizing is applied; done means stretch() is supported and the failing stretch-sizing test passes for a child filling the available cross axis.

Written by the indexing model from the issue text.

Description

enhancement

Is your feature request related to a problem?

There's no sizing mode that fills the cross axis. grow() expands a child along the container's main axis, but on the cross axis a child only ever sizes to its content (fit) unless you hardcode a fixed(). In a top-to-bottom container 12 cells wide, a fit-content child holding X computes width: 1—there's no way to say "fill the container's width" so it spans all 12.

Describe the solution you'd like

A stretch() sizing axis, sibling to grow() / fit() / fixed(), that expands the element to fill the available cross-axis space:

open("child", {
  layout: {
    width: stretch(),
    height: fixed(3),
  },
});

The name is stretch (not grow, which is main-axis flex-grow, nor fill)—it's the cross-axis analog, matching the CSS width: stretch sizing keyword. Flexbox also expresses the same fill behavior as align-self: stretch, so this is the sizing-side counterpart to per-child align-self (#70). A stretch width in a ttb container makes the child span the full container width.

Describe alternatives you've considered

Setting width: fixed(containerWidth) works only when the container size is known and static—it hardcodes the dimension, breaks on resize, and can't follow a grow/fit parent. The renderer already knows the cross-axis extent at layout time; stretch just opts the child into it.

Additional context

Failing test case on nm/repro/stretch-sizing (test · diff).

decode_axis (src/clayterm.c:365) handles only FIT / GROW / PERCENT / FIXED; this needs a new stretch axis type there, a stretch() helper and packAxis case in ops.ts, and the cross-axis grow applied in the layout pass.

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.