From 86a2191b9cccef60cb64b39b23d9426b156caa04 Mon Sep 17 00:00:00 2001 From: Anton A S Date: Wed, 11 Mar 2026 00:31:36 +0300 Subject: [PATCH] Add maxLines guidance for fixed-height text in grids --- src/ai/system-prompt.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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.