search

brave / brave-browser

Brave browser for Android, iOS, Linux, macOS, Windows.
https://brave.com
Mozilla Public License 2.0
18k stars 2.36k forks source link

Connect button overlaps on the text #40930

Open srirambv opened 2 months ago

srirambv commented 2 months ago

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

image image

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

Reproducibility

Miscellaneous information

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

aguscruiz commented 2 months ago

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

mattmcalister commented 1 month ago

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

aguscruiz commented 1 month ago

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?

Image

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 commented 1 month ago

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

aguscruiz commented 1 month ago

Created an issue for this here: https://github.com/brave/brave-browser/issues/41619