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.