Tap radius is outside the URL bar

[srirambv]

Description

Tap radius is outside the URL bar

Actual result:

Expected result:

Not sure should probably be similar to the URL bar shape

Issue reproduces how often:

Easy

Issue happens on:

• Current Playstore version? NO
• Beta build? Yes

Device Details:

• Install Type(ARM, x86): ARM
• Device(Phone, Tablet, Phablet): Pixel 3XL
• Android Version:9.0

Brave version:

1.0.74

Website problems only:

• Does the issue resolve itself when disabling Brave Shields?
• Is the issue reproducible on the latest version of Chrome?

Additional Information

cc: @SergeyZhukovsky @samartnik @jamesmudgett

[yachtcaptain23]

@jenn-rhim what are your thoughts? We currently have set the layout width and height to be 18x16. A 2 pixel radius difference won't matter much, and we're already pushing the limits for button size.

[srirambv]

@brave/legacy_qa to check on smaller screen devices as well. Issue is logged based on a 6.1" screen size. Smaller screen size would have (probably) an even awkward display.

[srirambv]

This also happens on Yes I'm Ready buttons as well

[jamesmudgett]

There are a couple of issues here.

1. The address bar should have an 8px rounded corner vs a fully rounded corner. See:
   

2. Button size (mdpi) 44x40 for both brave and bat logos. And we should add a 7px rounded corner to these.

3. The button should sit inside of the address bar and appear as shown: (selected):
   

Side-by-side both buttons touch but do not overlap:

[jamesmudgett]

@srirambv the button highlight in a web view is an issue with how chrome handles links. @ryanml is there a way to disable outline on the buttons?

[ryanml]

@jamesmudgett I am not sure, this is more of a question for @SergeyZhukovsky

[jamesmudgett]

@ryanml Does the css for those buttons contain an outline property?

[jamesmudgett]

CSS property that could be set here to avoid this type of highlighting?

[ryanml]

@jamesmudgett my mistake, I thought the icon in the nav bar was being referred to. Highlighting on the button can be removed via CSS

[srirambv]

This is still an issue on current android-tabs release version. Its very subtle but still noticible

This is also an issue on beta as well. Its not as prominent as it used to be before because of the url rounded corners