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

Open Beginner friendly
#5,603 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
68/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
rails, ruby
Domain
design, frontend

Research direction

Reproduce the issue from Requests by opening a started request, selecting “Fulfill request,” and narrowing the window; compare it with the regular new distribution form. Inspect the “Items in this distribution” line-item header row and verify that the Quantity, Total Units, and Requested headers remain readable and aligned with their inputs or values, then capture before-and-after screenshots.

Written by the indexing model from the issue text.

Description

stale

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
Dominant language
Ruby
Stars
593
Forks
594
Avg merge
4d 22h
Merged PRs (30d)
41

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from rubyforgood/human-essentials

All issues in rubyforgood/human-essentials

Similar issues

More Ruby issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.