harden

Use text-overflow: ellipsis with overflow: hidden for single-line truncation, or -webkit-line-clamp for multi-line clamping. For flex and grid items, set min-width: 0 to allow shrinking below content size and prevent container overflow.

Use CSS logical properties like margin-inline-start and padding-inline instead of physical left/right properties so layouts flip automatically. Test with Arabic or Hebrew content and mirror directional icons with transform: scaleX(-1) under [dir="rtl"].

Handle 400 with validation messages, 401 by redirecting to login, 403 with a permission error, 404 with a not-found state, 429 with a rate-limit message, and 500 with a generic error plus retry option. Each status needs a distinct user-facing response.

Budget 30-40% extra space since languages like German typically run 30% longer than English. Avoid fixed widths on text containers and use flexbox or grid layouts that adapt to content length.

Client-side validation can be bypassed by disabling JavaScript or crafting direct API requests. Always validate and sanitize inputs server-side as well to protect against injection attacks and enforce rate limiting.