Connect button overlaps on the text

[srirambv]

Description

Connect button overlaps on the text

Steps to reproduce

1. Install 1.71.72
2. Select VPN menu and connect to a server
3. Scroll down to US
4. Connect button overlaps on text

Actual result

Expected result

TBD

Reproduces how often

Easily reproduced

Brave version (brave://version info)

Brave	1.71.72 Chromium: 128.0.6613.120 (Official Build) nightly (64-bit)
Revision	7661000529b73e155d9386d67d2508cc6b71f6b5
OS	Windows 11 Version 23H2 (Build 22631.4037)

Channel information

• release (stable)
• beta
• nightly

Reproducibility

• with Brave Shields disabled
• with Brave Rewards disabled
• in the latest version of Chrome

Miscellaneous information

Will also be an issue when using it on other locales
cc: @rebron @aguscruiz @MadhaviSeelam @GeetaSarvadnya @mattmcalister

[aguscruiz]

This is the intended behavior, it's supposed to overlap, since it only appears on the hover state

[mattmcalister]

it does seem odd to me @aguscruiz . can we consider a different treatment?

[aguscruiz]

The other alternative I had in mind was to just crop the city name ### only on hover, when it exceeds the place "Connect" would take. What do you think?

An alternative was to just use an icon instead of the "connect" but I don't know if just an icon could be easy enough to understand.

[mattmcalister]

👍 cropping the city name on hover works better than overlapping the text, imo.

[aguscruiz]

Created an issue for this here:
#41619