Make a 40-line request usable on a narrow screen
At 200% zoom, a sticky total covers the final row and horizontal scrolling separates quantity inputs from labels. Fix the equipment-request layout.
- Focused work estimate
- 2h + prerequisites
- Priority in the scenario
- Medium
- Engineering practice
- Responsive design · CSS · Accessibility
Estimated field mix
- Accessibility60%
- Frontend40%
Field percentages are editorial estimates of the ticket's engineering focus. They total 100%; they are not measured time, proficiency scores, or ownership evidence.
Review it, then add it to your workspace.
The board opens an editable draft; nothing is saved until you confirm it. Sign-in and workspace permissions apply, and Demo boards remain ephemeral.
Project context
The fictional Beacon operations team buys equipment through a browser form. Finance checks totals, departments, and quotes. Scope is one currency per request and an approval API contract; payments and accounting integration are excluded.
Setup prerequisites
- Synthetic department and cost-center directory
- Draft, submission, and approval API fixtures
Preceding work
Complete these dependencies, or supply their agreed outputs before taking this ticket.
- FORM-102 · Make the total match the submitted line items
- FORM-101 · Point requesters to the field that needs fixing
- FORM-103 · Clear an orphaned cost center when department changes
- FORM-104 · Save drafts without overwriting a second browser tab
- FORM-105 · Show attachment quarantine and upload recovery clearly
- FORM-106 · Show finance what changed since their last review
Acceptance criteria
- Labels, values, errors, and remove actions remain associated at the agreed narrow viewport and zoom.
- The total and footer never cover focusable content.
- Long vendor names and 40 lines remain readable without losing review information.
Implementation constraints
- Use semantic CSS; do not replace rows with unlabelled visual cards.
Verification to include
- Review the 40-line fixture by keyboard at 200% zoom and capture its final row.
- Use a long vendor and invalid quantity; the error remains visible without horizontal page overflow.
Deliverables
- Responsive line-item layout and zoom walkthrough
Rollout and recovery
Preview on agreed finance viewports; revert the layout if associations or actions become inaccessible.
Value of the work
For the engineer: Practice form modeling, exact totals, revision handling, and collaboration under failure.
For the team: Inspect whether a developer protects business workflows from duplicate, lost, or misleading submissions.
Evidence boundaries
Outcome Evidence: Tests, patches, and runbooks are requested deliverables. They become Outcome Evidence only through a qualified Mission and immutable Evidence IDs.
Ownership Evidence: Independent adaptation must be observed under a declared verification policy and cite immutable Evidence IDs. Completing a planning ticket establishes no Ownership Evidence.