theseus-run UI Layout Discipline
Use this skill for data-dense UI surfaces where layout stability matters.
Core Rule
Dynamic content must not accidentally change row height, column width, cell size, or neighboring layout geometry.
If a table, calendar, matrix, or dashboard cell can show optional content, reserve space for the absent state or use a layout primitive that guarantees stable dimensions.
Required Patterns
- For matrix/table cells, use explicit CSS grid tracks, fixed/min heights, or table-native sizing. Do not let optional labels add a new row only in some cells.
- Render an empty placeholder row for missing optional labels when the label row exists for other cells.
- Constrain text that can grow with
truncate, fixed tracks, line clamps, or an explicit detail surface. Do not let long status labels resize the cell. - Keep repeated cells visually isomorphic: same internal rows, same spacing, same alignment, same hit target.
- Use browser verification after changing layout. Check both a populated cell and an empty cell in the same row.
Review Traps
- Optional badges/tags adding height.
- Text wrapping inside a fixed-format cell.
- Hover/selected borders changing dimensions.
- Cards inside cards used to solve spacing.
- Fake dashboard/admin shell elements kept after the product surface narrows.
Acceptance Check
Before finishing UI work, verify:
- cells with and without optional content have the same measured height
- selected and unselected cells have the same dimensions
- long labels do not push neighboring content
- browser screenshot or DOM inspection confirms the intended stable layout