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

💡 Per-child align-self

Open
#70 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
cli

Research direction

Start with the layout field definitions in ops.ts, the decoding path at src/clayterm.c:499, and the failing test in test/align-self.test.ts. Trace the layout pass to see where cross-axis alignment is applied. Done means the test passes and a child with alignSelf can override the parent while other children retain the parent's alignment.

Written by the indexing model from the issue text.

Description

enhancement

Is your feature request related to a problem?

A container's cross-axis alignment (alignX / alignY) applies to all its children at once—there's no way for a single child to align differently. In a top-to-bottom column that left-aligns its children, you can't right-align just one of them. The single-child workaround of promoting a child's alignment onto the parent breaks the moment two children need divergent alignment.

Describe the solution you'd like

A per-child alignSelf on layout that overrides the parent's cross-axis alignment for that one element:

open("b", {
  layout: {
    width: fit(),
    alignSelf: "flex-end", // override just this child to the cross-axis end
  },
});

alignSelf should mirror the CSS align-self property, and its values should use the string-literal form from the alignment refactor in #42 (re: #3). Children without alignSelf keep following the parent's alignment. The "stretch" value (fill the cross axis) is the alignment-side equivalent of the stretch() sizing axis in #71.

Describe alternatives you've considered

Wrapping the odd-one-out child in its own intermediate container with a different alignX works for one case but bloats the tree and doesn't compose—every divergently-aligned child needs its own wrapper.

Additional context

Failing test case on nm/repro/align-self (test · diff).

Clay exposes only container-level childAlignment; per-child alignSelf needs a field on the element's layout (ops.ts), decoded in reduce (src/clayterm.c:499), and applied as a cross-axis override 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.