css: set PRE’s max-width so it doesn’t stretch the viewport

css: set PRE’s max-width so it doesn’t stretch the viewport

I’m not entirely sure how PRE sizing is working.  It has overflow-x
set to auto which I assumed would make it automatically limit the
width so that it fits within the viewport but that is not the case.

Change the CSS (and add accompanying JS) so that the max-width of the
PRE element is limited to the usable width of the viewport.  This
prevents the PRE from having arbitrary width which then causes the
parent object to be wider than the viewport.

This isn’t a great solution.  It requires accounting for scroll bars
and also custom rules for PRE elements which are inside other elements
which have margins.  However, so far it’s the best I could figure out.