I'm not sure if the issue is that the Page Previews:

1. are too big on small screens
2. are "cut off" on small screens
3. both?

If they're too big, then making them smaller would be the goal.
If they're "cut off" (i.e require scrolling to see the content) then they don't necessarily need to be smaller, just positioned differently (forcing the "wider" version instead of the tall one perhaps)

Probably though, making them smaller in some ways would prevent them from being cut off.

To @Jdlrobson's suggestion of rendering them only if they fit in the viewport, I'm not sure if that's a good idea. That could lead to confusion, where previews don't rendering when you scroll (eg. link is at top of screen, plenty of room below to render, link in middle of screen, not enough room above or below to render).

Making them smaller across the board (no images is an interesting idea, or giving them a flexible width?😵) or not render at all seems like a more consistent solution.

To me the issue is that they are cut off, which I don't think making them smaller would fix. Is there anything we can do about positioning? I'm almost tempted to decline this task - with browser heights that small I think users are expecting to not have everything fit on screen - not suggesting this is optimal, but I'm questioning how much effort we want to put into fixing it.

To @Jdlrobson's suggestion of rendering them only if they fit in the viewport, I'm not sure if that's a good idea. That could lead to confusion, where previews don't rendering when you scroll (eg. link is at top of screen, plenty of room below to render, link in middle of screen, not enough room above or below to render).

To clarify what I meant here was not show previews at all. For instance if the screen size is 320 by 480 page previews in current form are not the best of ideas so we should probably not enable them. Preview size is fixed so we should be able to determine sensible screen sizes to enable this feature.

With respect to the zoom level, it seems like an impossible issue to solve for without a different design strategy.

@Nirzar what do you suggest ?

Three options based in order of preference

Option A
No images below certain screen size. this is intermediate solution to ease the pain of scrolling. this is just option B but a little treatment help.

Option B
we do nothing. this is content overflow issue which happens a lot if you have a small screen. I checked and if you scroll you can actually read the preview (the preview does not disappear while scrolling) not ideal option but also kinda taking into account the context of someone using small screens. scrolling is not unexpected or unreasonable.

Option C
Disable previews below certain styles. the problem with this approach is logistics. disables them also means we take care of removing all the traces. settings/preferences. logged in- logged out users. footer link etc. feature management based on screen size seems like a bad idea to me. particularly a feature that has settings attached to it. it will create a ton of debt when we do more settings like reference previews etc. which btw will work on smaller screens.