Safari for iOS Results Page Too Wide

TVPaulD

When searching for certain terms
in Safari on iPhone, the results page is slightly wider than the portrait viewport, resulting in redundant horizontal scrolling which cannot be prevented by zooming completely out, which makes scrolling up and down awkward

The normal behaviour is for the page to completely match the width of the viewport so only vertical scrolling can happen

sefidel

Some elements (URL, Redirection Indicator, etc) goes outside the viewport on mobile browsers (tested on Safari, Firefox), which makes the website also scroll horizontally.

Replication steps:

Search for ‘reddit’
Notice that the site has horizontal scrolling
Look for any elements that goes outside the viewport

Expected behaviour:
The site should only scroll vertically.
(Elements should be inside the viewport)

Device: iPhone 15 Pro
iOS Version: 17.3

sefidel

I've identified two problems:

Title does not wrap correctly when a word is too long (e.g. af09fa8dee69bef4f65a1662d9ad91c2329946e1)
- Temporary workaround: .__sri-title-box { max-width: calc(100% - 60px); }
Long URLs does not wrap correctly on mobile
- Temporary workaround: .__sri-url { max-width: calc(100% - 25px); }
- Possibly caused by: .__sri-uri { max-width: 100%; }@ k_m_sea.scss.min.css:1

teiem

Hey sefidel,

Thank you very much for your bug report and your provided workarounds 🙂
A fix should be pushed with the next release.