Skip to content

Layout issues with long names in last remaining filter list on options page

Environment

  • OS version: macOS 10.15.4
  • Browser version: Chrome 81.0.4044.138 64bit
  • Extension version: Adblock Plus 3.8.4.3901
  • Last working version: ?
  • Screen size: 13,3-inch (2560 x 1600)

Steps to reproduce

  1. Open Settings page
  2. In General tab remove all Language lists
  3. Add বাংলা (ভারত), ગુજરાતી (ભારત), हिन्दी, ਪੰਜਾਬੀ (ਭਾਰਤ) + English (IndianList+EasyList)

Observed behavior

  • No padding between list name and CHANGE
  • Box expands beyond tab content pane
  • Tip: text beneath the box also expands beyond tab content pane

Screenshot_2020-05-20_at_17.26.18

Expected behavior

  • Long listname is ellided or linebreaked to a second line
  • Padding between listname and CHANGE
  • Maxwidth of <div id="blocking-languages"> is not affected by inner elements

Further information

Also when switching language, there's a temporary display of the list url, which also expands the box too far to the left until the url is replaced with the display name.

Screen_Recording_2020-05-20_at_17.53.10

Edited by Thomas Greiner
To upload designs, you'll need to enable LFS and have an admin enable hashed storage. More information