enhancement
major
minor
major
minor
major
#29613
TL Views: a `<dashboard>` tile gets no definite height, so a table in a tile grows with its rows instead of scrolling
Problem
The "My work" page of the issue tracker tl-dev is a <dashboard> of five <tile>`s, each a `<panel> holding a <table filter-bar="true"> over the session user's tickets. A tile has no definite height: TLDashboard.tsx takes part in no fill contract (#29534: neither useFill, useFillHost nor FillBarrier), its grid style sets only grid-template-columns and gap, so the grid rows are implicit and content-sized; .tlDashboard__tile is a flex column with min-height: 0; overflow: hidden passing flex: 1 1 auto to a child whose height therefore resolves against an indefinite size.
Consequence: a table in a tile grows with its row count instead of scrolling. Measured live: a tile is 182 px with one row and 218 px with two, exactly one 36 px row apart, and .tlTableView__body never scrolls, so the table's virtualization degenerates into rendering every row. A tile of "assigned to me" with a few hundred tickets makes the page as tall as the list. row-span on the tile does not help, those rows are content-sized too.
A second consequence of the missing barrier: a <panel fill="true"> inside a tile reports its fill request to the container hosting the dashboard, so the page around the dashboard reacts to a request meant for the tile.
Solution
The dashboard grid has a definite row unit, and a tile is a bounded region of the fill contract:
- <dashboard row-height="16rem"> (new attribute, default 16rem, a CSS length) sets grid-auto-rows of the grid. A tile is row-span units tall plus the gaps between them, so row-span means what it says. The span also holds in the single-column layout of a narrow viewport, where it was forced to 1 before.
- The tile is a FillBarrier: a <panel fill="true"> or a table inside resolves its height against the tile and scrolls internally, and nothing outside the dashboard reacts to it.
- The tile scrolls what does not fit (overflow: auto instead of hidden), the same semantics as a panel body: a non-filling content taller than its tile scrolls inside the tile instead of being clipped.
- Documentation in docs/faq/react-view-layer.md ("Filling the available height").
- The Flow Diagram page of the React demo (demo/flow-diagram-demo.view.xml) is laid out as a dashboard: a Products tile, a Construction Plan tile spanning two rows, a Build steps table tile with a filter bar whose eight rows scroll inside the one-row tile, and a Details tile; the diagram, the table and the form share the selected build step.
A per-tile height attribute is deliberately not offered: a tile of a CSS height of its own in a grid of uniform rows breaks the row arithmetic.