Reduce horizontal scrolling in code examples

Question

Horizontal scrolling is annoying.
In rather narrow viewports it tends to appear frequently.
The usability issue is that it breaks "flow" mind state.
I eliminated it (almost totally) with a simple TamperMonkey script that widens JS pre tags when the cursor pointer hovers them.
If you want to try it, here is the code:

// ==UserScript==
// @name         Enlarge StackOverflow code examples on hover
// @namespace    https://stackoverflow.com/questions/*
// @version      0.1
// @description  Depending on the viewport width, StackOverflow code examples might
//               require a lot of annoying horizontal scroll, and eventually vertical
//               scroll too.
//               This script enlarges the code boxes "<pre>" when the mouse pointer
//               hovers them.
// @include      https://stackoverflow.com/questions/*
// @author       Juan Lanus
// @grant        GM_addStyle
// @grant        unsafeWindow
// ==/UserScript==
/********************************************************************************/
// console.log("stackOverflow pre enlarger");
GM_addStyle(`pre.lang-js.prettyprint.prettyprinted:hover {
    width:880px;
    max-height:unset;
    position:relative;
    z-index:99;
}`);
/******************************************************************************************************************/

When the code sample is hovered, the CSS rule widens the code box and brings it to front.
It also eliminates the max-height so the code wont have a vertical scrollbar.

IMO something similar could be implemented in the UI (better done) for the benefit of all us.