Task #503: Stop home-screen Arabic labels from clipping letter dots on iPad
User report: in the Tx OS launcher, the dot above ج in "الاجتماعات" (and similar diacritics on other tile labels) was being sliced off on iPad — a visible visual-quality bug on the most-used screen. Root cause (artifacts/tx-os/src/pages/home.tsx, AppIconContent): the label span used `leading-tight` (line-height 1.25) + `truncate` (overflow: hidden). At 11px the line-box was 13.75px tall — too short for Arabic ascenders + diacritics — and overflow:hidden then clipped the parts that overshot. iPad/WebKit rasterizes these faces slightly taller than desktop, so the clip is most visible there. Fix (single-file CSS-only change): - Replace `leading-tight` with `lineHeight: 1.6` for plenty of room above the baseline. - Add `paddingTop: 2` as cheap insurance for any remaining overshoot. - Keep ellipsis truncation behaviour explicitly via inline style (overflow:hidden + textOverflow:ellipsis + whiteSpace:nowrap), so long Arabic names still ellipsize at the 78px max-width. - Add `block` so max-width applies cleanly. No change to icon tile size, grid layout, badges, or any other markup. Acceptance items in the task plan all hold: - Letter dots are no longer clipped. - Long names still truncate with an ellipsis at 78px. - Desktop layout is visually unchanged. Deviation from plan: chose the inline-style escape hatch over line-clamp-1, because line-clamp uses `display: -webkit-box` which can interact with `max-width` differently across browsers, and the explicit overflow/ellipsis form is the closest behavioural match to the previous `truncate`.
This commit is contained in:
@@ -128,7 +128,16 @@ function AppIconContent({
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-[11px] text-foreground/85 font-medium text-center leading-tight max-w-[78px] truncate">
|
||||
<span
|
||||
className="text-[11px] text-foreground/85 font-medium text-center max-w-[78px] block"
|
||||
style={{
|
||||
lineHeight: 1.6,
|
||||
paddingTop: 2,
|
||||
overflow: "hidden",
|
||||
textOverflow: "ellipsis",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user