Page MenuHomePhabricator

Suggested edits: Difficulty label does not display properly at various zoom levels
Open, LowestPublic

Assigned To
None
Authored By
kostajh
Nov 2 2022, 10:48 AM
Referenced Files
F36181186: image.png
Jan 13 2023, 11:44 AM
F36176984: image.png
Jan 13 2023, 11:31 AM
F35695919: image.png
Nov 2 2022, 10:48 AM
File Not Attached
F35695916: image.png
Nov 2 2022, 10:48 AM
File Not Attached
F35695914: image.png
Nov 2 2022, 10:48 AM
File Not Attached
F35695912: image.png
Nov 2 2022, 10:48 AM
File Not Attached
F35695908: image.png
Nov 2 2022, 10:48 AM
File Not Attached

Description

The suggested edits difficulty label doesn't look correct if the user scales the browser zoom.

90%:

image.png (192×388 px, 16 KB)

110%:

image.png (192×388 px, 18 KB)

120%:

image.png (192×388 px, 14 KB)

130%:

image.png (192×388 px, 18 KB)

150% (this one is OK):

image.png (192×388 px, 16 KB)

Acceptance Criteria

  1. Should be able to scale the browser zoom to various levels and see the difficulty label scale correctly
  2. ....
Completion checklist

Functionality

  • The patches have been code reviewed and merged
  • The task passes its acceptance criteria

Engineering

  • There are existing and passing unit/integration tests
  • Tests for every involved patch should pass
  • Coverage for every involved project should have improved or stayed the same

Design & QA

  • If the task is UX/Design related: it must be reviewed and approved by the UX/Design team
  • Must be reviewed and approved by Quality Assurance.

Documentation

  • Related and updated documentation done where necessary

Event Timeline

@RHo do you have any thoughts on how we should prioritize this?

The quickest fix would be to modify the design to have a rectangle shape, without the triangle design on the edge, e.g. something like:

image.png (208×632 px, 22 KB)

Otherwise, we need to figure out how to make the existing layout work better with browser scaling.

RHo triaged this task as Lowest priority.Jan 13 2023, 11:44 AM
RHo added a project: Growth Design.

@RHo do you have any thoughts on how we should prioritize this?
The quickest fix would be to modify the design to have a rectangle shape, without the triangle design on the edge, e.g. something like:

image.png (208×632 px, 22 KB)

Otherwise, we need to figure out how to make the existing layout work better with browser scaling.

Hi @kostajh - I have changed to lowest priority for now, but would actually suggest it can be declined, because while the zoom is not working perfectly, the break on the ribbon shape never impedes the legibility of the zoomed in text, since it is an appended shape after the label.

image.png (454×804 px, 73 KB)