This PR revisits and more neatly solves an issue that we've tried a couple of times to fix: content wrapping in unfortunate ways in Mathquill dynamic inputs, in recent versions of Chrome.
The underlying issue is that we have a cursor which takes up space in the layout, even though only the left border is visible to us. This causes whitespace wrapping in some cases, even when a user doesn't perceive this consumption of space.
Previously, we've made attempts to adjust whitespace wrapping in certain nestings of CSS classes, but new cases have arisen that make this approach unviable (we sometimes have wrapping in an unnested component).
This PR instead changes the width of the cursor to be only one pixel. It also introduces some CSS to fix a problem of the cursor height growing under this circumstance.
It was identified by Kerrin that in certain cases, Mathquill injects an invisible placeholder element, and it's that element that causes wrapping in this new case.
So the additional CSS rules prevent that happening. It's noted that the new :has selector is utilised, which will not be available in older browsers, but it's rationalised that this fix only applies to newer versions of Chrome, where it will be supported.
This PR also reverts the previous changes to wrapping rules, which are no longer necessary.
This PR revisits and more neatly solves an issue that we've tried a couple of times to fix: content wrapping in unfortunate ways in Mathquill dynamic inputs, in recent versions of Chrome.
The underlying issue is that we have a cursor which takes up space in the layout, even though only the left border is visible to us. This causes whitespace wrapping in some cases, even when a user doesn't perceive this consumption of space.
Previously, we've made attempts to adjust whitespace wrapping in certain nestings of CSS classes, but new cases have arisen that make this approach unviable (we sometimes have wrapping in an unnested component).
This PR instead changes the width of the cursor to be only one pixel. It also introduces some CSS to fix a problem of the cursor height growing under this circumstance.
It was identified by Kerrin that in certain cases, Mathquill injects an invisible placeholder element, and it's that element that causes wrapping in this new case.
So the additional CSS rules prevent that happening. It's noted that the new
:hasselector is utilised, which will not be available in older browsers, but it's rationalised that this fix only applies to newer versions of Chrome, where it will be supported.This PR also reverts the previous changes to wrapping rules, which are no longer necessary.
Further discussion here:
https://mathspace.slack.com/archives/C0JGMF0CE/p1678229341107499