harden

Use text-overflow: ellipsis with overflow: hidden for single-line truncation, or -webkit-line-clamp for multi-line clamping. For flex and grid containers, set min-width: 0 on items so they can shrink below content size without overflowing.

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.

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

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.

Client-side validation can be bypassed, so all inputs must also be validated and sanitized server-side to prevent injection attacks. Client validation improves UX with inline feedback, but server validation is the actual security boundary.

Disable the submit button while the request is in flight and track submission state to block duplicate clicks. For race conditions, use optimistic updates with rollback logic and abort pending requests when components unmount.