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 overflow-wrap: break-word for wrapping.

Use CSS logical properties such as margin-inline-start and padding-inline instead of physical left/right properties. Mirror directional icons with transform: scaleX(-1) under [dir="rtl"], and test layouts with Arabic or Hebrew content.

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.

No, client-side validation only improves user experience and can be bypassed. Always validate and sanitize inputs again on the server, enforce length and pattern constraints, and apply rate limiting to protect against injection attacks.

Disable the submit button while the request is in flight and guard the handler with a loading state flag. For optimistic updates, implement rollback logic so failed requests restore the previous state.

German text is often 30% longer than English, and CJK or emoji characters have different widths and byte sizes. Avoid fixed-width text containers, use flexible flexbox or grid layouts, and budget 30-40% extra space for translations.