Opened on 12/08/2017 at 12:52:45 PM
Closed on 12/20/2017 at 03:13:38 PM
Last modified on 03/27/2018 at 12:52:28 PM
#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): | |||
Description (last modified by saroyanm)
Environment
Test environment: http://adblockplus.github.io/adblockplusui/desktop-options.html?locale=en_US
How to reproduce
- Access the test environment
- 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)
Change History (14)
Changed on 12/08/2017 at 12:53:23 PM by Shikitita
comment:2 Changed on 12/19/2017 at 03:20:06 PM by saroyanm
- Priority changed from Unknown to P2
- Ready set
comment:3 Changed on 12/19/2017 at 03:28:03 PM by saroyanm
- Cc jeen added
I can see couple of options to fix this issue, each of them has it's pros and cons:
- 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).
- cropping the long words and showing ... in the end.
- Decreasing the font-size in general and/or increasing the width of the sidebar.
- 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 on 12/19/2017 at 03:52:49 PM 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 on 12/19/2017 at 04:05:05 PM 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.
comment:6 Changed on 12/20/2017 at 01:42:21 PM by saroyanm
- Owner set to saroyanm
comment:7 Changed on 12/20/2017 at 01:52:48 PM by saroyanm
- Review URL(s) modified (diff)
- Status changed from new to reviewing
comment:8 Changed on 12/20/2017 at 02:33:17 PM 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 on 12/20/2017 at 03:11:46 PM by saroyanm
- Description modified (diff)
Added note for test just in case, but uk text was the longest so far.
comment:10 Changed on 12/20/2017 at 03:12:52 PM by abpbot
A commit referencing this issue has landed:
Issue 6177 - Fixed overlaping header text in the sidebar
comment:11 Changed on 12/20/2017 at 03:13:38 PM by saroyanm
- Resolution set to fixed
- Status changed from reviewing to closed
comment:12 Changed on 01/10/2018 at 03:38:55 PM 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 on 03/27/2018 at 12:52:28 PM 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
Overlapping in Ukrainian