harden

Use text-overflow: ellipsis with overflow: hidden for single-line truncation, or -webkit-line-clamp for multi-line clamping. Set min-width: 0 on flex and grid items so they can shrink below content size, and use word-wrap: break-word for wrapping.

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 using transform: scaleX(-1) under the dir="rtl" attribute.

Map each status code to a specific response: 400 shows validation errors, 401 redirects to login, 403 shows a permission message, 404 shows a not-found state, 429 shows a rate-limit notice, and 500 shows a generic error with a retry option.

Disable the submit button while the request is in flight so rapid clicks cannot trigger duplicate operations. For race conditions, use optimistic updates with rollback logic and abort pending requests when components unmount.

German translations are often 30% longer than English, so fixed-width containers overflow. Add a 30-40% space budget, use flexbox or grid that adapts to content, and size buttons with padding like px-4 py-2 instead of fixed widths.

Test with 100+ character text, emoji, CJK characters, empty states, 1000+ item lists, offline and throttled 3G connections, rapid repeated clicks, forced API errors, keyboard-only navigation, and screen readers.