Mobile unfriendliness

[theastrogoth]

Some things that aren't working (well) for mobile devices:

• The fixed-width lookup results table (720px) may not fit on the screen
• Graphic generation produces images that are cropped around the edges (mobile Firefox) or hangs without generating anything (iOS Safari)

I've personally got around the first issue by adding custom zoom setting in Safari of 50% for the TRB page, but there is probably a better fix, like font based on viewport size...?

Not really sure how to test/debug graphic problems for mobile devices.

[Ericzklm]

For the cropping issue, I had the same issue on Chrome mobile but this commit ended up solving it by adding extra buffering for the DOM. Maybe inserting more delay fixes it for Firefox?

For Safari, I can at least confirm that the MacOS version of Safari does not have the issue and MacOS Safari with the iOS agent also does not hit the issue. I dont have actual iOS but can see if I can emulate it on MacOS

[Ericzklm]

I was able to emulate iOS through Xcode and attach an inspector. Unfortunately, I'm not hitting the hang or seeing any relevant errors

2025-08-26.00-11-54.mp4

[theastrogoth]

It turns out an iOS update fixed the issue. Oops.

The iOS emulation through Xcode seems really handy! I might try get my hands on a Mac.

For the cropping issue, I had the same issue on Chrome mobile but this commit ended up solving it by adding extra buffering for the DOM. Maybe inserting more delay fixes it for Firefox?

I think the cropping issue only comes up with smaller (e.g. just one build) builds-only graphics, so it would make sense if things are moving more quickly and need an extra delay. I'll play around with using setTimeout() to keep the image from saving too soon.