Skip to content

On Distributions, fix line-item column headers wrapping and alignment on narrow screens #5603

Description

@augustocbx

Summary

On distributions (both when fulfilling a request and on the regular form), making your screen narrower breaks the line-item column headers: "Quantity - Total Units" wraps onto three lines and the headers stop lining up with the inputs/values below them. Tidy up the header row so it stays readable and aligned on narrow screens.

Why

The form looks broken on narrow screens — the header text wraps awkwardly and drifts out of alignment with its columns, making "Items in this distribution" hard to read.

Details

This was noticed while fixing #5556 (the item dropdown not resizing). With the dropdown now responsive to window width, the remaining roughness is in the header row of "Items in this distribution":

  • The "Quantity - Total Units" header wraps onto three lines on a narrow window.
  • The "Requested" header (and the "Quantity" header) no longer line up vertically with the input/value they label.

To see this, sign in as org_admin1@example.com, click Requests, click view beside a started request, click "Fulfill request" (this also happens on the regular new distribution form), then make the window narrow.

Criteria for completion

  • line-item column headers stay readable (no awkward multi-line wrapping) on narrow screens
  • headers line up with the inputs/values they label
  • include before/after screenshots in your PR

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions