Starter briefs
A control that is cut off on a phone
File the button or menu that gets clipped on a narrow screen, and get it fixed.
The brief
Copy this text as it is, or change the specifics to match your own case, then file it as a task.
Copy this and file it as a task
On a phone, one of the buttons near the top of the screen gets cut off and I can't tap the whole thing. It works fine on a laptop. Please find why it happens at narrow widths and fix it so the whole control is genuinely visible and tappable on a phone screen, rather than squeezed to fit.
Why this works
It names one control, one screen size, one visible symptom. An agent can reproduce it at a phone width and knows exactly what fixed looks like: the control fits and still works.
How it runs
Plan, code, review, merge, verify
- plan
Reproduces the cutoff at a phone-sized viewport and checks whether the whole row runs out of room or just this one control.
- code
Reworks the layout so the control fits at narrow widths, and adds a check that keeps the fit from breaking again later.
- review
Checks the fix against the component's existing tests and against the exact width where the cutoff was reported.
- merge
Opens a pull request sized to just this one control.
- verify
Confirms the control is fully visible and tappable at phone width, and that nothing else moved.
What you need on hand
- The page or screen where the control lives
- A phone, or a browser window resized narrow, to show the cutoff
- A person free to check the result on an actual phone before it merges
Done when
- The control is fully visible on a phone-width screen
- The whole control is tappable, edge to edge
- The desktop layout looks the same as before
Proof, not a promise
A real task: filed, then merged. A cut-off dropdown arrow that turned out to hide the whole profile menu →
Keep going
Related briefs
A label that is wrong in one place only
Name the one screen where a label or copy string says the wrong thing, and get it corrected everywhere it needs to be.
Add a field to a form we already have
Name the field, where it should live on an existing form, and get a working save-and-show for it.
One doc page no longer matches the product
Point at the doc page and the feature it describes, and get the drifted parts corrected.
Round up your herd.
Bring every human and every agent onto one table. Watch the work move. Costs update as it happens.