mdn / mdn/fred

Search box focus outline is getting clipped

Open
#992 1 comment 0 reactions 1 assignee View on GitHub

@low-perry is already working on this.

Since Mar 25, 2026.

Dominant language
JavaScript
Stars
233
Forks
61
Avg merge
1d 1h
Merged PRs (30d)
82

Description

What information was incorrect, unhelpful, or incomplete?

Steps to reproduce:

  1. Bring up the search box
  2. type border
  3. Click TAB key
  4. You'll see the first suggestion getting an outline.
  5. Notice the outline is clipped at the top and the right border.
  6. Click TAB key one more time.
  7. Notice the outline is clipped at the right border.
  8. Click tab key till you reach the last suggestion.
  9. Notice the outline is clipped at the bottom and the right border.

Refer to the following screen recording:

https://github.com/user-attachments/assets/24ff6bf8-0de4-44a0-bb19-d8bc2fa65341

What did you expect to see?

The focus indicating outline is not clipped:

https://github.com/user-attachments/assets/d7afba48-1274-4aee-b0c2-279515a31c73

The above result was achieved using an ad hoc fix:

a {
  ...
  width: calc(100% - 4px);
  margin: 2px;
}
Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

The issue is reproducible in the latest Linux Mint os on the latest Firefox and Chrome browsers.

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.