Focus indicator in shields panel is trimmed

[btlechowski]

Steps to Reproduce

1. Change OS display scale to 125%
2. Clean install
3. Open a page
4. Open shields panel
5. Focus a toggle

Actual result:

Focus indicator is trimmed on the right side

Note: reproducible for Light and Dark theme

Expected result:

Focus indicator is not trimmed on the right side

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

Brave	0.64.60 Chromium: 74.0.3729.91 (Official Build) beta (64-bit)
Revision	03844ed83e02b8add3f4b9cb859a7108d55b2e4d-refs/branch-heads/3729@{#860}
OS	Windows 10 OS Build 17134.523

cc @brave/legacy_qa @cezaraugusto

[rebron]

cc: @karenkliu

[kjozwiak]

Went through the following:

• macOS 10.14.4 x64 using 0.66.50 Chromium: 74.0.3729.131 - Couldn't reproduce
• Mint 19.1 Tessa x64 using 0.66.50 Chromium: 74.0.3729.131 - Couldn't reproduce
• Win 10 x64 using 0.66.50 Chromium: 74.0.3729.131 - Reproduced

macOS 10.14.4 x64 Example:

Mint 19.1 Tessa x64 VM Example:

Windows 10 x64 Example:

[kjozwiak]

@srirambv can you reproduce this on your linux desktop?

[srirambv]

This happens on switch when theme is set to light on Linux Desktop. The problem is the focus indicator on the edge of shields is half blocked as you can see the thickness is less on the shields panel edge compared to the side inside the panel

Dark theme

Light Theme