← Dev log
EduQate·frontend·2026-08-18

An Arabic label clipped by an English width

A fixed maxWidth sized for English hard-clipped an Arabic label with numberOfLines={1}; React Native Web truncates at that width without an ellipsis.

Only visible by using it

Invisible to a code read. Found by being the real user, on a real device, at a real width.

The mobile signup progress indicator had stepLabel: { maxWidth: 64 } with numberOfLines={1}. "Personal info" just fits. "المعلومات الشخصية" doesn't, and React Native Web's truncation at that width doesn't add an ellipsis, it hard-clips — so the label rendered as a broken half-word ending on a bare connector stroke.

It reached me as "Arabic text not appearing well," which is how bilingual layout bugs arrive: as a vague complaint about the language, not the layout. Every fixed width in a bilingual app is a bet that the longest translation fits, and Arabic isn't reliably shorter than English.