Ledger Doesn't Handle Long Titles Neatly

[jonathansampson]

Description

A Site or YouTube Channel with a sufficiently long title can break the ledger UX.

Steps to Reproduce

1. Visit https://www.youtube.com/watch?v=SqqqRqA2caA
2. View other videos on Channel until Creator appears in Ledger

Actual result:
"ThePotatoIsAStarchyTuberousCropFromThePerennialSolanumTuberosumOfTheNightshadeFamilyLOL" breaks the ledger layout.

Expected result:
Creator's name should not break the ledger layout.

Reproduces how often:
Always

Brave Version

0.20.42

about:brave info:

Brave: 0.20.42 
V8: 6.4.388.41 
rev: 096c7cb3c75ebb518f72fc7d24bc2bbaedd50aed 
Muon: 4.8.2 
OS Release: 10.0.16299 
Update Channel: Release 
OS Architecture: x64 
OS Platform: Microsoft Windows 
Node.js: 7.9.0 
Brave Sync: v1.4.2 
libchromiumcontent: 64.0.3282.140

Reproducible on current live release:
Yes.

[ryanml]

Was thinking about taking this on, but then I see @NejcZdovc got it :)

I would motion towards truncating it to n characters and then adding a trailing '...', then adding a title/label property that would show the full value on hover perhaps. Is that what you were thinking?

[NejcZdovc]

@ryanml you can take it, no problem. I was thinking of fixing all of this with css

[ryanml]

@NejcZdovc got it, thanks. I certainly don't want to over-engineer anything if you have a pure CSS solution though. If you're fine with a truncation solution, I'll open a PR, else, maybe we could go over what stylistic change might work for this. Thanks!

[ryanml]

@NejcZdovc this is what I put together here:

Truncating at 45 characters was the most sensible limit before it started bleeding over.

[NejcZdovc]

pulling this one into 0.22 based on the triage call

[srirambv]

Verified on Windows x64

• 0.22.6 e6ff4ea
• libchromiumcontent: 65.0.3325.162
• muon: 5.1.0

Verified on macOS 10.12.6 x64 using the following build:

• 0.22.6 e6ff4ea
• libchromiumcontent: 65.0.3325.162
• muon: 5.1.0

Verified on Ubuntu 10.10 x64

• 0.22.7 8bb7e77
• libchromiumcontent: 65.0.3325.181
• muon: 5.1.1