[Bug] The math equation editor should have a monospaced font

[matous-volf]

Already fixed in the native app: AppFlowy-IO/AppFlowy#8489

On the web:

and:

[simonlpaige]

Looking at this, the fix in the native app (AppFlowy-IO/AppFlowy#8489) likely involved adding a font-family: 'Courier New', Courier, monospace CSS rule to the math equation editor's input field. On the web side, the issue is visible in two places: the inline equation editor (first screenshot showing the variable-height input with proportional font) and the block equation editor (second screenshot with the narrow, clipped input).

The root cause is probably in the KaTeX/LaTeX editor component. In appflowy_web, the math editor likely uses a contenteditable div or textarea without the monospace font-family applied. Check the component at src/components/editor/plugins/math/ or similar path — the native app fix suggests adding style={{ fontFamily: 'monospace' }} to the editor's input element.

For a quick workaround, you can inject a CSS override in your user stylesheet:

.math-editor-input, [data-math-editor] {
  font-family: 'Courier New', Courier, monospace !important;
}

The fix itself should be straightforward: locate the math editor component (likely wrapping KaTeX's MathField or a custom editor), and ensure the input element inherits or explicitly sets font-family: monospace. The native app's PR diff would show exactly which CSS property was changed.