Opened 23 months ago

Closed 22 months ago

Last modified 19 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 23 months ago.
Overlapping in Ukrainian

Download all attachments as: .zip

Change History (14)

Changed 23 months ago by Shikitita

Overlapping in Ukrainian

comment:1 Changed 23 months ago by Shikitita

  • Description modified (diff)

comment:2 Changed 22 months ago by saroyanm

  • Priority changed from Unknown to P2
  • Ready set

comment:3 Changed 22 months 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 22 months 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 22 months 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 22 months ago by jeen (previous) (diff)

comment:6 Changed 22 months ago by saroyanm

  • Owner set to saroyanm

comment:7 Changed 22 months ago by saroyanm

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

comment:8 Changed 22 months 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 22 months ago by saroyanm

  • Description modified (diff)

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

comment:10 Changed 22 months ago by abpbot

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

comment:11 Changed 22 months ago by saroyanm

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

comment:12 Changed 22 months 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 19 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.