Row actions wrap onto their own line and clip off-screen between ~641 and ~780px wide #674

New issue

Open

opened 2026-09-23 03:09:20 +00:00 by Cordy · 0 comments

Cordy commented

2026-09-23 03:09:20 +00:00

Owner

Found by the #656 QA pass (v0.6.247, both dogfoods).

Matrix row: §10 Phone pass — "Mobile viewport across sections | Sheets, no horizontal scroll, tap targets". The style guide's phone band also applies.

Steps

Open Personal (files-bao as sharer1, or files _qa as nikola-test) at a viewport width of 660, 669 or 720px. The phone chrome with the bottom tab bar is active.
Look at the file rows.

Expected: the row actions (star, download, ⋮) sit inline at the right edge, as they do at 560px and 800px.
Seen: the actions drop onto a separate line under each row, flush left. On file rows (three actions) the first icon is pushed past the left edge: the star renders at x=5 and is visibly cut off. The buttons measure 16×16 px, compared with 28px at 560 and 800. Measured on both hosts:

width	star button
560	x=479, w=28, inline ✅
660 / 669 / 720	x=5–23, w=16, own line ❌
800	x=717, w=28, inline ✅

So one of the max-width rules in the 640–780 range (the stylesheet has 640, 700, 760, 780) switches the row to the phone chrome without the phone row layout. This width is a real device range: tablets in portrait, split-screen, and landscape phones.

Related at 375px: the "Shared" chip on a long folder name is clipped mid-word ("Sha…") rather than ellipsised with the name.

Screenshot: 674-row-actions-wrap-720.jpg (720px frame on files, red border)

Found by the #656 QA pass (v0.6.247, both dogfoods). **Matrix row:** §10 Phone pass — "Mobile viewport across sections | Sheets, no horizontal scroll, tap targets". The style guide's phone band also applies. **Steps** 1. Open Personal (files-bao as sharer1, or files `_qa` as nikola-test) at a viewport width of 660, 669 or 720px. The phone chrome with the bottom tab bar is active. 2. Look at the file rows. **Expected:** the row actions (star, download, ⋮) sit inline at the right edge, as they do at 560px and 800px. **Seen:** the actions drop onto a separate line **under** each row, flush left. On file rows (three actions) the first icon is pushed past the left edge: the star renders at x=5 and is visibly cut off. The buttons measure **16×16 px**, compared with 28px at 560 and 800. Measured on both hosts: | width | star button | |---|---| | 560 | x=479, w=28, inline ✅ | | 660 / 669 / 720 | x=5–23, w=16, own line ❌ | | 800 | x=717, w=28, inline ✅ | So one of the `max-width` rules in the 640–780 range (the stylesheet has 640, 700, 760, 780) switches the row to the phone chrome without the phone row layout. This width is a real device range: tablets in portrait, split-screen, and landscape phones. Related at 375px: the "Shared" chip on a long folder name is clipped mid-word ("Sha…") rather than ellipsised with the name. **Screenshot:** `674-row-actions-wrap-720.jpg` (720px frame on files, red border)