In a dense form row, a label that wraps pushes its control below the others #156

New Issue

2026-09-29T01:56:25Z

cgalo5758 commented

2026-09-29 01:56:25 +00:00

The dense form family lays its fields out in one row. It assumes every label fits on one line above its control, so that all the controls share one line. The commit button and a checkbox have no label above them. They are padded down by the height of one label line, so that they sit level with the other controls.

The assumption fails when a column is too narrow for its label. On the organization page's Issue grant panel at 1280 wide, the Quantity column's label "Quantity (optional)" fills the column, and its help icon wraps to a second line. The Quantity input then sits one line lower than the Product select, the Valid until input and the Reason select beside it. The same happens to any dense field whose label, "(optional)" marker and help icon together are wider than its column. At some widths it also happens to a column whose label alone is long.

Nothing in the row notices the wrap. Each column is aligned to the top independently, so a wrapped label moves only its own control. The padding on the unlabeled columns is a fixed one-line height.

This issue does not propose a fix. The known options each cost something: truncating a label hides words, widening columns breaks the row sooner, and aligning to the bottom breaks the rule that an error under a control grows only its own column.

Done when:

In every dense form the console renders, at 1280 and at 390, all controls in one row sit on one line, including when a label, its "(optional)" marker and its help icon need more than one line.
An error under one control still grows only that control's column.
The form-library requirement "A dense row aligns to the top and keeps its errors under their controls" describes the rule that is actually used.

The dense form family lays its fields out in one row. It assumes every label fits on one line above its control, so that all the controls share one line. The commit button and a checkbox have no label above them. They are padded down by the height of one label line, so that they sit level with the other controls. The assumption fails when a column is too narrow for its label. On the organization page's Issue grant panel at 1280 wide, the Quantity column's label "Quantity (optional)" fills the column, and its help icon wraps to a second line. The Quantity input then sits one line lower than the Product select, the Valid until input and the Reason select beside it. The same happens to any dense field whose label, "(optional)" marker and help icon together are wider than its column. At some widths it also happens to a column whose label alone is long. Nothing in the row notices the wrap. Each column is aligned to the top independently, so a wrapped label moves only its own control. The padding on the unlabeled columns is a fixed one-line height. This issue does not propose a fix. The known options each cost something: truncating a label hides words, widening columns breaks the row sooner, and aligning to the bottom breaks the rule that an error under a control grows only its own column. Done when: - In every dense form the console renders, at 1280 and at 390, all controls in one row sit on one line, including when a label, its "(optional)" marker and its help icon need more than one line. - An error under one control still grows only that control's column. - The form-library requirement "A dense row aligns to the top and keeps its errors under their controls" describes the rule that is actually used.

cgalo5758 added the

kind

bug

area/operator-ui labels 2026-09-29 01:56:25 +00:00

cgalo5758 commented

2026-10-01 04:43:04 +00:00

My notes, to weigh when this is worked:

Higher priority. The misalignment shows on the first panel an operator opens on an organization page, the Issue grant panel.
"(optional)" takes too much room. The marker is a large part of why labels outgrow their columns. Explore subtler ways to convey that a field is optional or required. That exploration may deserve its own issue.
A plain grid is not the answer on its own. Aligning every control to one row line would push the other fields' controls down, away from their own labels, which looks worse than the current misalignment.
Sizing a field by its label's width is a candidate. A field could be given at least the width its label needs. A label that is too long for any reasonable width still has to be handled, perhaps by wrapping, and then the alignment question returns.
The commit row should probably sit at the bottom right of the box in a dense form, rather than following the last field.
When a dense form is the wrong family. I would adopt this rule: a dense form is right only while it fits on one line at desktop width. A form that needs a second line is not dense. Today's Issue grant panel needs two lines, so under that rule it would not be a dense form.

My notes, to weigh when this is worked: - **Higher priority.** The misalignment shows on the first panel an operator opens on an organization page, the Issue grant panel. - **"(optional)" takes too much room.** The marker is a large part of why labels outgrow their columns. Explore subtler ways to convey that a field is optional or required. That exploration may deserve its own issue. - **A plain grid is not the answer on its own.** Aligning every control to one row line would push the other fields' controls down, away from their own labels, which looks worse than the current misalignment. - **Sizing a field by its label's width is a candidate.** A field could be given at least the width its label needs. A label that is too long for any reasonable width still has to be handled, perhaps by wrapping, and then the alignment question returns. - **The commit row should probably sit at the bottom right of the box** in a dense form, rather than following the last field. - **When a dense form is the wrong family.** I would adopt this rule: a dense form is right only while it fits on one line at desktop width. A form that needs a second line is not dense. Today's Issue grant panel needs two lines, so under that rule it would not be a dense form.

cgalo5758 added the

priority

high

label 2026-10-01 04:43:04 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: wiki-cafe/member-console#156