Layout tested with long strings

Severity: Recommended

Text expansion varies by language:

• German is ~30% longer than English
• Finnish and Hungarian can be 40%+ longer
• Buttons, labels, and navigation break when text doesn't fit

Check automatically:

# Check for text overflow handling in CSS
grep -riE "text-overflow|overflow.*hidden|truncate|ellipsis|whitespace.*nowrap" src/ --include="*.css" --include="*.scss" --include="*.tsx" 2>/dev/null | head -10

# Look for Storybook or visual testing with different lengths
grep -riE "long.*text|text.*length|overflow|truncat" --include="*.stories.*" . 2>/dev/null | grep -v node_modules | head -5

# Check for responsive/flexible layouts (good sign)
grep -riE "flex-wrap|min-width|max-width|overflow-wrap|word-break" src/ --include="*.css" --include="*.scss" 2>/dev/null | head -10

# RED FLAG: Fixed widths on text containers
grep -riE "width:\s*\d+px" src/ --include="*.css" --include="*.scss" 2>/dev/null | head -10

Ask user:

• "Has the UI been tested with longer text (German, Finnish)?"
• "Are there visual regression tests for different locales?"
• "How are overflow issues caught?"

Pass criteria:

• UI handles text expansion gracefully (wrapping, truncation with tooltip)
• Tested with a "long" locale (German) or pseudo-localization with expansion
• Fixed-width containers avoided for text content
• Visual regression tests include non-English locales

Fail criteria:

• Only tested with English
• Buttons/labels overflow or get cut off in other languages
• "We'll fix it when translators complain"

Evidence to capture:

• Text expansion testing approach
• Visual regression tests (if any)
• Overflow handling patterns

---