Site-icon's focus ring is too tall, and is clipped beneath the site icon below it

Description

Focus ring is too tall, and is clipped beneath the site icon below it

Steps to Reproduce

1. switch to the Favorites view in Top Sites via either the context-menu item or via Customize -> Top Sites -> Favorites
2. add > 6 favorites (up to 12)
3. start pressing Tab on the first row, and notice the focus ring

Actual result:

The focus ring extends beneath the next site’s favicon, and looks awkward due to being clipped

Expected result:

No clipping into the next site’s favicon; in Figma, the focus ring looks to merely comprise the favicon/tile, not the accompanying site text

Reproduces how often:

100%

Brave version (brave://version info)

Brave	1.24.2 Chromium: 89.0.4389.90 (Official Build) nightly (x86_64)
Revision	62eb262cdaae9ef819aadd778193781455ec7a49-refs/branch-heads/4389@{#1534}
OS	macOS Version 11.2.3 (Build 20D91)

Version/Channel Information:

• Can you reproduce this issue with the current release? no
• Can you reproduce this issue with the beta channel? yes
• Can you reproduce this issue with the nightly channel? yes

cc: @karenkliu @rebron @simonhong @bsclifton

[GeetaSarvadnya]

1.21.x - Not Reproducible 1.22.x - Not Reproducible 1.23.x - Reproducible 1.24.x - Reproducible

[stephendonner]

Verified FIXED using

Brave	1.24.26 Chromium: 90.0.4430.30 (Official Build) nightly (x86_64)
Revision	5674335ff855e43f3bccf8cfc29a779bdf0d067f-refs/branch-heads/4430@{#532}
OS	macOS Version 11.2.3 (Build 20D91)

The focus ring is now back to spec.