# A control that is cut off on a phone

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.

Source: https://codeherder.com/starter-briefs/control-cut-off-on-phone/

Starter briefs

File the button or menu that gets clipped on a narrow screen, and get it fixed.

[Request access →](https://codeherder.com/get-started/#request-access) [Part of: Clear the bug backlog →](https://codeherder.com/use-cases/clear-the-bug-backlog/)

## 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

Copy brief

```
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

1. plan Reproduces the cutoff at a phone-sized viewport and checks whether the whole row runs out of room or just this one control.
2. code Reworks the layout so the control fits at narrow widths, and adds a check that keeps the fit from breaking again later.
3. review Checks the fix against the component's existing tests and against the exact width where the cutoff was reported.
4. merge Opens a pull request sized to just this one control.
5. 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 →](https://codeherder.com/examples/mobile-usermenu-cutoff/)

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.](https://codeherder.com/starter-briefs/label-wrong-in-one-place/) [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.](https://codeherder.com/starter-briefs/add-a-field-to-a-form/) [One doc page no longer matches the product Point at the doc page and the feature it describes, and get the drifted parts corrected.](https://codeherder.com/starter-briefs/doc-page-out-of-date/)

[← See every brief](https://codeherder.com/starter-briefs)