0

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.

You must log in to answer this question.

Browse other questions tagged .