vertical lines overlapping under brave://settings/appearance in Tabs section

[kjozwiak]

Description

It's really hard to see but looks like there's two small vertical lines that are overlapping the other vertical lines via brave://settings/appearance under the Tabs section. See screenshot for example of the issue.

Steps to Reproduce

1. ensure that vertical tabs are enabled on your channel (enable brave://flags/#brave-vertical-tabs if not)
2. go into brave://settings/appearance and notice the issue (see screenshot for an example)

Actual result:

Expected result:

It should be a single vertical line so it looks cleaner and not like we're stacking multiple vertical lines in one area.

Reproduces how often:

100% reproducible when using the STR/Cases outlined above.

Brave version (brave://version info)

Brave | 1.53.13 Chromium: 113.0.5672.63 (Official Build) nightly (64-bit)
-- | --
Revision | 0e1a4471d5ae5bf128b1bd8f4d627c8cbd55f70c-refs/branch-heads/5672@{#912}
OS | Windows 11 Version 22H2 (Build 22621.1555)

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes (once 1.51.x goes out which is tomorrow)
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

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

Miscellaneous Information:

CCing @rebron @brave/qa-team

[rebron]

cc: @fallaciousreasoning @aguscruiz

[joshuakatt]

Kindly assign this to me. I would like to take care of this!

[fallaciousreasoning]

@joshuakatt I've assigned you 😄 Feel free to reach out if you have any questions

[ItIsOHM]

Hey @joshuakatt are you working on this? I'm a beginner so I'd like to work on this :D

[joshuakatt]

Hi @ItIsOHM Thanks for reaching out, but I'm currently working on this already!

[ItIsOHM]

No worries! A side question, is there a way or some sort of an app that gives me an alert whenever a "good first issue", or generally any specified label issue is raised? It'll make it easier for newbies like me to keep up with the latest beginner friendly issues :D

Sorry if it's wrong to discuss it here I just wasn't sure where to ask this.

[fallaciousreasoning]

Hey @ItIsOHM, thanks for your interest! I don't think there is sorry, unless you're a member of the Brave organisation - the closest is probably refreshing the issues with that label unfortunately (and that's not very helpful). @bsclifton might know better though.

[fallaciousreasoning]

@ItIsOHM I just tagged you on another issue, if you want to take a look

[shreyansh1410]

Hey @fallaciousreasoning, can you assign me on any beginner friendly project?

[satvik2131]

Hey , is anyone working on this issue , or is this issue is resolved ?

[fallaciousreasoning]

The issue isn't resolved yet, feel free to submit a PR 😄

[buddhdev-harsh]

@fallaciousreasoning To submit a PR do I have to make changes in the brave/brave-core repo or I can directly submit changes to this repo?

[simonhong]

This issue will be fixed by my another PR(brave/brave-core#20409)

[kjozwiak]

The above requires 1.60.95 or higher for 1.60.x verification 👍 Can technically be verified alongside #33128.

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.60.96 Chromium: 118.0.5993.88 (Official Build) beta (64-bit)
-- | --
Revision | b4c059ad1d32d6e0cd1466123f03ccb97b3cf858
OS | Windows 10 Version 22H2 (Build 19045.3570)

Verified the STR from the description and ensured vertical lins overlapping in Use Vertical Tab is removed