Skip to content

MonacoQueryInput styling tweaks

Administrator requested to merge lg/monaco-query-input-styling into master

Created by: lguychard

Some UI polish on the Monaco query input. Screenshots in Details.

  • Use the keyword color from our regular syntax highlighting themes to highlight filters, and the regular query input color for the rest of the text.
  • Tweak suggestions widget colors to better match our light and dark themes.
  • Fix off-by-1px height difference between the query input and surrounding UI elements.
  • Match padding-left from the regular query input (previously had no padding).
  • Cursor is thinner, and longer takes the full height of the input.
  • Don't use absolute positioning for in-field toggles to avoids conflict with query text.
  • Don't display a box shadow around Monaco's .inputarea element, fixes a small visual blip above the cursor position.

Merge request reports