Skip to content

Add cui layout: container tree with rects and overflow markers #5

Closed

Description

@albertwoo

Context

When content overflows its container there is no way to see why. ui.RectOf(id) only works for widgets with an id, containers rarely have one, and a screenshot only shows the clipped result. Fitting 12 ranking rows into a 404 px card took three rebuild-and-screenshot cycles to tune paddings.

Proposal

cui layout (or cui tree --rects) prints the container tree of the last frame with each node's rectangle, scroll extent, and a flag for content larger than its box:

Card      0,0    404x780
  Scroll  16,60  372x700   content 372x1120   OVERFLOW
    Row   16,60  372x46
  • Include widget kind, id when it has one, x/y/w/h, and available/clipped deltas.
  • Optional in-app --debug-layout: tint boxes whose children overflow, so a single screenshot can answer the same question for visual issues (overlap, zero height, off-screen).

Acceptance

One cui layout call identifies the overflowing node and its bounds without taking an image.

Activity

  1. albertwoo commented on Nov 11, 2026

    @albertwoo
    ContributorAuthor

    Fixed and merged in PR #14.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions