harden

Identify weaknesses and edge cases: • Test with extreme inputs: • Very long text (names, descriptions, titles) • Very short text (empty, single character) • Special characters (emoji, RTL text, accents) • Large numbers (millions, billions) • Many items (1000+ list items, 50+ options) • No data (empty states) • Test error scenarios: • Network failures (offline, slow, timeout) • API errors (400, 401, 403, 404, 500) • Validation errors • Permission errors • Rate limiting • Concurrent operations • Test internationalization: • Long translations (German is often 30% longer than English) • RTL languages (Arabic, Hebrew) • Character sets (Chinese, Japanese, Korean, emoji) • Date/time formats • Number formats (1,000 vs 1.000) • Currency symbols CRITICAL: Designs that only work with perfect data aren't production-ready. Harden against reality.

Systematically improve resilience:

Long text handling: `css / Single line with ellipsis / .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } / Multi-line with clamp / .line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } / Allow wrapping / .wrap { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } ` Flex/Grid overflow: `css / Prevent flex items from overflowing / .flex-item { min-width: 0; / Allow shrinking below content size / overflow: hidden; } / Prevent grid items from overflowing / .grid-item { min-width: 0; min-height: 0; } ` Responsive text sizing: • Use clamp() for fluid typography • Set minimum readable sizes (14px on mobile) • Test text scaling (zoom to 200%) • Ensure containers expand with text

Text expansion: • Add 30-40% space budget for translations • Use flexbox/grid that adapts to content • Test with longest language (usually German) • Avoid fixed widths on text containers `jsx // ❌ Bad: Assumes short English text <button className="w-24">Submit</button> // ✅ Good: Adapts to content <button className="px-4 py-2">Submit</button> ` RTL (Right-to-Left) support: `css / Use logical properties / margin-inline-start: 1rem; / Not margin-left / padding-inline: 1rem; / Not padding-left/right / border-inline-end: 1px solid; / Not border-right / / Or use dir attribute / [dir="rtl"] .arrow { transform: scaleX(-1); } ` Character set support: • Use UTF-8 encoding everywhere • Test with Chinese/Japanese/Korean (CJK) characters • Test with emoji (they can be 2-4 bytes) • Handle different scripts (Latin, Cyrillic, Arabic, etc.) Date/Time formatting: `javascript // ✅ Use Intl API for proper formatting new Intl.DateTimeFormat('en-US').format(date); // 1/15/2024 new Intl.DateTimeFormat('de-DE').format(date); // 15.1.2024 new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(1234.56); // $1,234.56 ` Pluralization: `javascript // ❌ Bad: Assumes English pluralization ${count} item${count !== 1 ? 's' : ''} // ✅ Good: Use proper i18n library t('items', { count }) // Handles complex plural rules `