fix(web):Analyzing screen: Design issue with text wrapping and Zoom levels (only for Windows system)

[Helen-Sen]

Describe your issue

When adjusting the page zoom, the text inside the element "We’re Analyzing Your Journey!" behaves inconsistently. For certain zoom levels (50%, 80%, 90%, 100%, 125%, 150%), the text splits into two lines, while at other zoom levels (67%, 75%, 110%), it remains on a single line. According to the design specifications, the text should always be displayed in a single line regardless of the zoom level.

Steps to reproduce

1. Go to on Sign in page (http://bebalance.eu-central-1.elasticbeanstalk.com/sign-in) and authorize
2. Go to on Quiz page (http://bebalance.eu-central-1.elasticbeanstalk.com/quiz)
3. Change Zoom level (from 50% to 150%)

What was the actual result?

When user changes page Zoom level for certain zoom levels (50%, 80%, 90%, 100%, 125%, 150%), the text inside the element "We’re Analyzing Your Journey!" splits into two lines, while at other zoom levels (67%, 75%, 110%).

What was the expected result?

When user changes page Zoom level the text inside the element "We’re Analyzing Your Journey!" remains on a single line.

Put here any screenshots or videos (optional)

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Severity

Minor (S4)

[KeidsID]

@Helen-Sen The text split issue hasn't occurred anymore, but the page looks odd on 1.5x zoom.

Should we create new ticket for it?

[Helen-Sen]

@KeidsID 1) This issue is reproduced when responsive 1024px, 1200px

2) QA will not open a new ticket for 1.5x zoom, page is looks ok.

Note: I can see it on Windows 10, Chrom browser: 128.0.6613.120

[KeidsID]

I can't reproduce the issue 🫠