Fix comment author focus outline being broken

[absidue]

Fix comment author focus outline being broken

Pull Request Type

• Bugfix

Related issue

fixes #4025

Description

Fixes the focus outline not wrapping around the comment author, turns out the culprit was overflow: none on the .commentAuthorWrapper class. I also fixed some of the issues that stylelint was pointing out in the file.

Screenshots

before:

after:

Testing

Tab through the comments and check that the outline around the comment author names displays correctly.

Desktop

• OS: Windows
• OS Version: 10
• FreeTube version: 0.19.0

[kommunarr]

The problem is that now the author text can overflow for sufficiently long names.

[absidue]

If we want to keep overflow set to none, we either need to add left, top and bottom margins to the channelAuthor class (the existing right margin is why the outline is visible there) or add some padding to channelAuthorWrapper, to stop the overflow setting from cropping off the outline.

[kommunarr]

Up to you on whether we want to keep the text-oveflow: ellipsis behavior here, but worth noting that we use word-wrap: break-word for all other text in the comments section. It works pretty well here, but I have no preference.

[absidue]

I don't really know what the best approach is to solve the problem without overflowing text.
Is your suggestion to revert the overflow: none removal and add word-wrap: break-word instead or keep the overflow: none remove and additionally add word-wrap: break-word?

[kommunarr]

The latter; apologies if that wasn't clear

[kommunarr]

LGTM