Opened 2 years ago

Closed 2 years ago

Last modified 21 months ago

#6177 closed defect (fixed)

[ABP UI] Options Page - Overlapping of "Settings" translations

Reported by: Shikitita Assignee: saroyanm
Priority: P2 Milestone:
Module: User-Interface Keywords:
Cc: saroyanm, greiner, jeen, Ross Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

https://codereview.adblockplus.org/29645600/

Description (last modified by saroyanm)

Environment

Test environment: http://adblockplus.github.io/adblockplusui/desktop-options.html?locale=en_US

How to reproduce

  1. Access the test environment
  2. In the URL, change the locale at the end for "uk"

Observed behaviour

The Ukrainian translation for "Settings" (Налаштування) overlaps with the right side of the UI as can be seen in the attached file.

Expected behaviour

The text should be displayed in the side bar on the left without overlapping.

Please note that the same issue happens with the locale "az".

Note for testers

  • Check if this is still a case for other translations

Attachments (1)

Overlapping.JPG (96.9 KB) - added by Shikitita 2 years ago.
Overlapping in Ukrainian

Download all attachments as: .zip

Change History (14)

Changed 2 years ago by Shikitita

Overlapping in Ukrainian

comment:1 Changed 2 years ago by Shikitita

  • Description modified (diff)

comment:2 Changed 2 years ago by saroyanm

  • Priority changed from Unknown to P2
  • Ready set

comment:3 Changed 2 years ago by saroyanm

  • Cc jeen added

I can see couple of options to fix this issue, each of them has it's pros and cons:

  1. Using the overflow-wrap: break-word; which will break the work into couple of lines, but it's not supported in Edge (so we might want to find alternative until shipping to edge, though can be good stopgap solution).
  2. cropping the long words and showing ... in the end.
  3. Decreasing the font-size in general and/or increasing the width of the sidebar.
  4. Finding shorter translations if possible.

I'll implement Num 1 solution as a stopgap, until @Shikitita and @Jeen will be in favor of another solution.
@Jeen, @Shikitita let me know which solution you prefer, or let me know if you have another suggestion (I'll discourage changing font size of particular language, because maintaining that might become a pain).

comment:4 Changed 2 years ago by Shikitita

I am more in favour of increasing the width of the sidebar, if possible, as in most normal screens it seems it'd still be properly displayed and at least the text would be readable.

comment:5 Changed 2 years ago by jeen

I think we can decrease the font size to 1.8em and increase the width of the sidebar to accommodate for the longest text length.

Last edited 2 years ago by jeen (previous) (diff)

comment:6 Changed 2 years ago by saroyanm

  • Owner set to saroyanm

comment:7 Changed 2 years ago by saroyanm

  • Review URL(s) modified (diff)
  • Status changed from new to reviewing

comment:8 Changed 2 years ago by saroyanm

  • Cc Ross added

@Ross adding you as it might require your attention in future when we will prepare for the release.

comment:9 Changed 2 years ago by saroyanm

  • Description modified (diff)

Added note for test just in case, but uk text was the longest so far.

comment:10 Changed 2 years ago by abpbot

A commit referencing this issue has landed:
Issue 6177 - Fixed overlaping header text in the sidebar

comment:11 Changed 2 years ago by saroyanm

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:12 Changed 2 years ago by greiner

I've created a spec ticket to find a more long-term solution for this issue to avoid running into maintainbility issues later on: https://gitlab.com/eyeo/spec/issues/127

comment:13 Changed 21 months ago by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Fixed.

ABP 3.0.2.1998
Firefox 51 / 58 / Windows 10
Chrome 49 / 65 / Windows 7
Opera 36 / 51 / Windows 7

Note: See TracTickets for help on using tickets.