Revert overflow-x: auto on .problem-content divs.

[drgrice1]

This was added in #1432, but is causing problems. If an answer rule is contained in a position: relative parent, then the MathQuill toolbar ends up being positioned correctly, but is contained inside the .problem-content div, and so you need to scroll to the right to see it. Note that the .ww-feedback-container is position: relative. So any answer inside a div with that class will have this issue.

An example problem for which the problem occurs is:

DOCUMENT();

loadMacros('PGstandard.pl', 'PGML.pl', 'parserMultiAnswer.pl', 'PGcourse.pl');

$ma = MultiAnswer(1, 2)->with(singleResult => 1);

BEGIN_PGML
[<
    Enter 1: [_]{$ma}{5}

    Enter 2: [_]{$ma}{5}
>]{ [ class => 'ww-feedback-container ww-fb-align-middle' ] }
END_PGML

ENDDOCUMENT();

Note that this is not a problem when using the problem editor, since the width of the .problem-content div is the same as its parent. So this will need to be tested in an actual set.

For now the overflow is left for solutions and hints. Those won't have answer rules, and thus will also not have the MathQuill toolbar issue.

So a different way to fix the issue with dark text overflowing into the dark region outside of the problem will need to be found. Any ideas?

[Alex-Jordan]

I saw the issue with the posted example and I see that this fixes that issue.

As for dark mode, it seems to me that we would just need to actually render the problem for dark mode. So its text (including math) would be white. And the problem background would be dark. I guess this would raise issues with image files that were never considered for dark mode use though.

[drgrice1]

What you are suggesting is that a dark mode be implemented for PG. That will take some effort. There are a lot of things to consider other than images. The webwork2 dark mode implementation not only honors the browser setting, but offers a user override of that. So, for instance, the browser can be set to dark mode, but the user can override that and still have the page displayed in light mode. So PG has to honor all of that. Also, the MathQuill implementation would need to be updated to honor dark mode or light mode however it is set. In general, almost all PG JavaScript and CSS that sets colors would have to be reviewed and updated.

Finally, there is the problem authoring issue. A problem author can use custom JavaScript and CSS that makes color changes. That can only be fixed by the problem author. So this would add something new that problem authors need to think about when authoring a problem. This includes not using transparent background colors for images among other things.

So in short, this is not so simple as just setting a dark background and light foreground color for dark mode.

[somiaj]

I assume you thought about this, but is there a way to keep the toolbar position but move it outside of the .problem-content div? (maybe have a container div .mq-tool-bar-container parent that the toolbar gets placed in)?

[drgrice1]

Doing that makes it difficult to maintain the tab order. With the current structure that is basically done using the native tab order, but if you move the toolbar somewhere else, then you would have to do so with JavaScript. In general that is a total pain to get to work right.

[drgrice1]

Furthermore, positioning becomes much harder to work out as well.

[Alex-Jordan]

I tried adding MathJax line breaking to the config. Just for getting started, I used the same config that is given in the example, except I went with inline: false. The result looks like this, in dark mode, and using the example from #1432.

[Alex-Jordan]

Here it is in light mode, with a small screen. The line breaking is not dynamic if your screen size changes, so this is after reloading the problem.

[somiaj]

Another random thought, what about removing the overflow-x: auto class when displaying the toolbar, and adding it back when hiding it. Not a good solution, but wonder if it is better than just not having the overflow set. For well written problems won't be an issue, and for problems that need the overflow, they can at least scroll/read things in dark mode when not in an input. Also maybe users who like darkmode would also just disable the toolbar so it won't be an issue. Just something I thought of that might be slightly better than not having the overflow set.

I do like @Alex-Jordan suggestion of enabling line wrapping. You can also make mathjax create scrolls for its own formulas, so they don't overflow but can be scrolled without having to scroll the whole div. Adding output: { displayOverflow: 'scroll' } to the MathJax config could enable this as well. This will at least keep formulas from overflowing, but images, and other things might.

[drgrice1]

Note that the wrapping of MathJax is really beside the point. I just used that as a for instance, but there are other things that cause the issue as well as I noted in #1432. I am not opposed to adding line wrapping for MathJax to handle that situation.

[Alex-Jordan]

Other things overflowing aside, what is the preference for a new configuration setting for MathJax wide expressions? Line breaking is one option. Another is scrolling. Note that a user can change this option in the MathJax menu, Math Settings, Wide Expressions. We'd just be picking scroll or linebreak as the default, instead of overflow. (We could also go with scale, which shrinks the math down.)

[drgrice1]

Here is another reason that overflow-x: auto needs to be removed from the .problem-content div that has nothing to do with MathJax, MathQuill, or anything we have discussed so far:

As you can see the feedback popover requires vertical scrolling to be seen.

[drgrice1]

The point is that this pull request is needed. So please review and approve, and lets get this in.

[drgrice1]

By the way, I even disabled MathQuill for that screenshot.

[drgrice1]

Also, I wrapped that answer in a ww-feedback-container div to make that happen.