The problem: Magento Developer Docs right navigation column is TOO narrow.
I’m writing my first Magento extension. If you’re not familiar with it, it is also known as Adobe Commerce and it’s one of the most widely used ecommerce software packages around, like the WordPress of ecommerce.
This requires going through Adobe’s developer documentation site where I found a very annoying feature.
The site navigation in a column on the right is fine, but the index of a page’s sections is in a column on the right. This becomes particularly useless when the page has a ton of sections and the section names have any length, because even on a maximized browser on a WQHD (2560×1440) resolution screen, the column is 200 pixels wide (including some padding and indents). For example, on Firefox, their events list, it looks something like this.
The solution: A Bookmarklet
You can go in and change that width in the F12 developer tools, but Firefox doesn’t support saving a local override via the dev tools. You’d have to manually go in and edit the page every time you loaded it. That’s a lot of steps, but we can reduce it to one.
And this is where bookmarklets come in. They are bookmarks with JavaScript as the URL. You can actually get pretty complex with what they do, but this one will do one simple thing… make the right column wider.
- In Firefox,
Control + Shift + O(for Windows or Linux) to open the Bookmarks Manager. - Select the Bookmarks toolbar folder
- Right-click it and select “Add Bookmark”
- Name the bookmark whatever you want, maybe ADWiden.
- In the URL space, copy and paste in one line of JS:
javascript: (() => { let sidebar = document.getElementsByClassName('page-info')[0]; sidebar.style.width="500px"; })(); - Save the bookmark.
- Click the bookmark.
This widens the right column by 300 pixels to 500. At that point, at least on my screen, everything seems to fit.
The feature is very similar for edge and Chrome. Also, if you want to expand this into a larger script, you can use document.documentURI to detect what page you’re on, so the script can define different actions for different domains, URLs, etc.
Enjoy!