Sqd 2505 mathquill input goes funky when zooming in the browser lindsay winkler

ClickUp: https://app.clickup.com/t/6924803/SQD-2505

This CSS change is an attempt to address an issue arising in recent versions of Chrome (Kevin speculates that it could be a side-effect of Chrome's efforts to update MathML support, leading to rendering updates there).

Discussion below describes problem identification, repro, description and alternate approaches that were attempted, with discussion.

This change reverts a CSS override (a Mathspace customisation). Removing a customisation that was undoubtedly made for a reason seems risky, though. The customisation was introduced in 3f61a85c8, but unfortunately that commit was simply an import of customisations that previously resided elsewhere, so I don't have a description of the rationale for the original customisation at hand, so unsure about what could have motivated it.

An alternative proposal would be to override the change on mq-non-leaf instead, so that mq-root-block would still have white-space set to normal, and then mq-non-leaf set not to wrap. This might localise the effect to the place that it looks like we need it.

Problem description

Rendering of Mathquill component is broken in recent versions of Chrome (eg. I have Version 109.0.5414.119). Specifically, input lines are broken (whitespace wrapped) unexpectedly. This has the additional side effect that Mathquill scales up the parens to accommodate the taller line, and then sometimes subsequently the line collapses again, but the parens remain scaled and overflow (visibly) the input box.

Cause

The synthetic cursor component appears only one pixel wide, because the only visible part is the left border, but the cursor element itself is wider, and causes wrapping. This is illustrated below by setting the background of the whole cursor:

Rejected solution

The initially proposed fix was to set the cursor element to 1px width. Doing so, though, leads to the height of the cursor being set automatically to an inappropriate height:

Or, if constraining the cursor height, the parent component in the hierarchy still expands to fit that content:

I'm unsure how to address this behaviour, which is part of Chrome's implementation of the CSS rules as far as I understand, but if we could get this to render correctly, this would be a better solution).

To explore

To investigate possible alternatives to the CSS fix, I'd recommend the following process:

Running locally, open any problem with a latex input
Enter a simple expression like 3(x+1) to illustrate the issue locally

Then, to explore solutions locally, after trying things out directly in the browser dev tools, I would edit the generated CSS directly, and reload:

Edit node_modules/mathquill/build/mathquill-mathspace.css in the Mathspace project (this is generated from the less in from this repo)
rm -rf node_modules/.cache to clear cached products
Re-run webpack build or let the watcher do it
Refresh the page

mathspace / msquill