diff --git a/src/ai/system-prompt.md b/src/ai/system-prompt.md index 2f697bf7b..a2f9a8339 100644 --- a/src/ai/system-prompt.md +++ b/src/ai/system-prompt.md @@ -46,7 +46,9 @@ For dynamic content (variable text length, generated lists), always use flex siz Absolute-positioned children (layout="none" parent) are unconstrained — they render at x/y regardless of parent bounds. Use overflow="hidden" to clip them. -**Text inside fixed-width containers:** Text without an explicit `w` auto-sizes and can exceed its parent width. When a container has a fixed width, always set `w` on multiword Text children to match the available space, or use `w="fill"`. Calculate: available = parent w − parent horizontal padding. Example: parent `w={156} p={0}` → text `w={156}`. +**Text inside fixed-width containers:** Text without an explicit `w` auto-sizes and can exceed its parent width. When a container has a fixed width, set `w` on multiword Text children to match the available space, or use `w="fill"`. Calculate: available = parent w − parent horizontal padding. + +If text with `w` is longer than the width, it wraps to the next line and increases height — which can break grid alignment. For data labels, metadata, and attribute values where height must stay consistent, add `maxLines={1}` to truncate with ellipsis instead of wrapping. **Wrap layouts:** In `flex="row" wrap`, each child's fixed width determines the column count. Calculate: columns = floor((parent_available + gap) / (child_w + gap)). Make sure text content fits within child width — if the longest text value is 20 characters at size 14, it needs ~170px. Don't guess widths — count characters × ~0.6 × fontSize.