Using js, how can I get Google or Bing search results to fit in the side bar

I’m running Firefox Developer Edition 96.0b9 (64-bit) on macOS Monterey 12.1.

My extension is called Context Search. It’s available on Github here and on AMO here.

I’ve set the User Agent to correspond to the iPhone, but it doesn’t seem to suffice:
'Mozilla/5.0 (iPhone9,3; U; CPU iPhone OS 10_0_1 like Mac OS X) AppleWebKit/602.1.50 (KHTML, like Gecko) Version/10.0 Mobile/14A403 Safari/602.1';

The Google search results are being truncated horizontally instead of fitting in the available width:

In the manifest.json, I used the following code:

	"sidebar_action": {
		"default_icon": "/icons/context-search.svg",
		"default_title": "Search results",
		"default_panel": "/sidebar/search_results.html",
		"open_at_install": false
	},

which has an associated stylesheet containing a viewport meta tag:

`<meta name="viewport" content="width=430, initial-scale=1.0">`

BUT, I wonder if search_results.html doesn’t get overwritten by:

	if (contextsearch_openSearchResultsInSidebar) {
	    browser.sidebarAction.setPanel({ panel: targetUrl });
	    browser.sidebarAction.setTitle({ title: 'Search results' });
	    return;
}

because targetUrl doesn’t have any viewport associated with it!

It’s not all clear to me!

Megan’s solution works for Google, but Bing search results suddenly overflow horizontally when scrolling down.

STEPS TO REPRODUCE ISSUE:

  1. in the main browser window, visit: https://www.bbc.com/news/world-59840513
  2. select the word “Omicron”
  3. Alt + click to open the grid of icons and click on the Bing icon
  4. The search results from Bing will be displayed in the sidebar
  5. Scroll down

The search results will suddenly overflow horizontally!

UPDATE: I can only reproduce this issue when I’m debugging the extension’s code in Visual Studio Code and launching the extension via ‘web-ext run’. I can’t reproduce the issue when loading the extension from AMO! Not sure whether the problem comes from Firefox, VS Code or web-ext!?!