Tables: the sort icon at the end of its header cell, whatever the column's alignment #317

New issue

Closed

opened 2026-09-29 11:26:45 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-09-29 11:26:45 +00:00

Owner

From the interface review of 2026-09-29, for every table, and Companies, Listings and Applications above all: the sort icon sits at the end of its header cell, even when the column's data is aligned to the start.

What is there today

In cotton/table/head.html:96 the header is a flex row: the column's name (which opens its filter, #253) and then the sort icon beside it, with justify-end only for a numeric column. In a text column the icon follows the name, so the icons of neighbouring columns do not line up, and a short name leaves its icon in the middle of a wide column.

What to do

The name goes at the start and the icon at the end (ms-auto on the sort control, or justify-between on the row). The end is the right in a left-to-right language and the left in Arabic and Hebrew. A numeric column keeps its name at the end too, beside the icon.
The icon keeps its 24-pixel target, and the header's reading order stays the name, then the icon.

Done when

Every table's sort icons are aligned to the end of their cells, checked in a left-to-right and a right-to-left language. At 320 pixels, a header that wraps keeps its icon on the first line.

From the interface review of 2026-09-29, for every table, and *Companies*, *Listings* and *Applications* above all: the sort icon sits at the end of its header cell, even when the column's data is aligned to the start. ## What is there today In `cotton/table/head.html:96` the header is a flex row: the column's name (which opens its filter, #253) and then the sort icon beside it, with `justify-end` only for a numeric column. In a text column the icon follows the name, so the icons of neighbouring columns do not line up, and a short name leaves its icon in the middle of a wide column. ## What to do - The name goes at the start and the icon at the end (`ms-auto` on the sort control, or `justify-between` on the row). The end is the right in a left-to-right language and the left in Arabic and Hebrew. A numeric column keeps its name at the end too, beside the icon. - The icon keeps its 24-pixel target, and the header's reading order stays the name, then the icon. ## Done when - Every table's sort icons are aligned to the end of their cells, checked in a left-to-right and a right-to-left language. At 320 pixels, a header that wraps keeps its icon on the first line.

tiagoagueda added this to the 0.5.0 milestone

2026-09-29 11:26:45 +00:00

tiagoagueda added the

enhancement

interface

labels

2026-09-29 11:26:45 +00:00

tiagoagueda referenced this issue from a commit

2026-09-29 16:18:11 +00:00

Put the main navigation in the person's order, and give a phone a bar at the foot

tiagoagueda referenced this issue from a commit

2026-09-29 21:40:58 +00:00