Layout problem in the strict blocking warning page on Firefox for Android

[in4u]

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

Description

For some (long?) links, the layout of strict blocking warning page messes up in a way that buttons become too small and their text overflows or gets hidden, font size becomes large, filter homepage icon size becomes tiny, etc.

If Settings > Accessibility > Use system font size is disabled in Firefox, the problem goes away. But this particular setting has absolutely no effect on the layout of any other page / tab / interface of uBO. There is proper consistent behavior all across uBO regardless of this setting except for the warning page.

A specific URL where the issue occurs

https://en.softonic.com/articles/robot-revolts-on-the-international-space-station

Steps to Reproduce

1. Enable Dan Pollock's hosts file filter.
2. Disable Settings > Accessibility > Use system font size in Firefox.
3. Open softonic.com and see there's no layout problem.
4. Open https://en.softonic.com/articles/robot-revolts-on-the-international-space-station and see there's no layout problem.
5. Enable Settings > Accessibility > Use system font size in Firefox.
6. Open softonic.com and see there's no layout problem.
7. Open https://en.softonic.com/articles/robot-revolts-on-the-international-space-station and see there's a layout problem.

Expected behavior:

Actual behavior:

Your environment

• uBlock Origin version: 1.17.4
• Browser Name and version: Firefox for Android 64.0.1
• Operating System and version: Android 8.1

[gwarser]

Layout looks ok. Switching "Use system font size" in Firefox settings does nothing now.

Not sure if this will be a problem, but on my phone page must be scrolled to access buttons. My phone is old, small and with low dpi - on new devices buttons should fit in screen.

Default screen font size (Android setting):

Looks like this with system fonts set to small (my setting):

Short URL (default font size):

[gorhill]

on my phone page must be scrolled to access buttons

My phone is not old and I also have to scroll a bit to reveal completely the buttons. I read a bit about <meta viewport> and I will try using height=device-height; if I understand correctly this should fix this.

Edit: Actually device-height should be pointless as the page is not laid out according to height constraint. initial-scale lower than 1.0 could work though. Or smaller icon actually...

[gwarser]

Maybe you should make warning sign image smaller?

[gorhill]

I reduced the size of the font when height is constrained, seems to work fine using the device emulator in the browser dev tools.