makepad-2-0-layout

Limitations

- Verify against current Makepad 2.0 docs; upstream APIs change frequently.

- Do not run bundled scripts without explicit user approval.

When to Use

- Use when this upstream workflow matches the user's stated goal.

- Use when the task requires the procedures documented in this skill.

# Makepad 2.0 Layout System

Makepad uses a **layout turtle** system -- not CSS flexbox, not CSS grid. The turtle walks

through children one by one, placing each widget according to two core concepts:

- **Walk** -- how a widget sizes itself (width, height, margin)

- **Layout** -- how a container arranges its children (flow, spacing, padding, align)

Every container widget (View, SolidView, RoundedView, ScrollYView, etc.) has both Walk

properties (its own size) and Layout properties (how it lays out children).

---

Walk System (Widget Sizing)

Walk controls how an individual widget claims space inside its parent.

width / height

| Syntax | Meaning |

|--------|---------|

| `width: Fill` | Fill all remaining horizontal space (default) |

| `width: Fit` | Shrink to fit content |

| `width: 200` | Fixed 200 pixels |

| `width: Fill{min: 100 max: 500}` | Fill with constraints |

| `width: Fit{max: Abs(300)}` | Fit content, capped at 300px |

| `height: Fill` | Fill all remaining vertical space (default) |

| `height: Fit` | Shrink to fit content |

| `height: 100` | Fixed 100 pixels |

use mod.prelude.widgets.*

// Fill: takes all available width
View{
    width: Fill height: Fit
    flow: Down
    Label{text: "I stretch to fill the width"}
}

// Fit: shrinks to content
View{
    width: Fit height: Fit
    padding: 10
    Label{text: "I am only as wide as this text"}
}

// Fixed: exact pixel size
View{
    width: 300 height: 200
    Label{text: "I am exactly 300x200 pixels"}
}

// Constrained Fill: fills but within bounds
View{
    width: Fill{min: 200 max: 600} height: Fit
    flow: Down padding: 16
    Label{text: "I fill available space but stay between 200-600px"}
}

CRITICAL: height: Fit on Containers

**This is the number one layout bug in Makepad.**

The default height is `Fill`. When your output renders inside a `Fit` container,

`Fill` inside `Fit` creates a circular dependency and resolves to **0 pixels**.

Your entire UI becomes invisible.

**Rule: ALWAYS set `height: Fit` on every View, SolidView, RoundedView, and similar

container unless the parent has a fixed or Fill height.**

// CORRECT -- height: Fit makes the container visible
View{
    width: Fill height: Fit
    flow: Down padding: 10
    Label{text: "I am visible"}
}

// WRONG -- defaults to height: Fill, resolves to 0px, invisible
View{
    width: Fill
    flow: Down padding: 10
    Label{text: "I am invisible (0px tall)"}
}

**Exceptions where height: Fill is acceptable:**

1. Inside a fixed-height parent:

View{
    height: 400
    View{
        height: Fill
        Label{text: "I fill the 400px parent"}
    }
}

2. Inside a `height: Fill` chain that ultimately reaches a known size (e.g., Window body).

3. ScrollYView always uses `height: Fill` because it must fill its parent to scroll.

margin

Margin adds space around the outside of a widget.

// Uniform margin on all sides
Label{text: "Hello" margin: 10}

// Selective margin with Inset
Label{
    text: "Indented"
    margin: Inset{top: 5 bottom: 5 left: 20 right: 20}
}

// Zero margin (note the trailing dot for float literal)
Label{text: "Flush" margin: 0.}

---

Layout System (Child Arrangement)

Layout controls how a container positions its children.

flow (Direction)

| Syntax | Meaning | CSS Equivalent |

|--------|---------|----------------|

| `flow: Right` | Left-to-right, single line (default) | `flex-direction: row` |

| `flow: Down` | Top-to-bottom, single column | `flex-direction: column` |

| `flow: Overlay` | Stack children on top of each other | `position: absolute` stacking |

| `flow: Flow.Right{wrap: true}` | Left-to-right with wrapping | `flex-wrap: