fix(editor): stop the suggest docs panel clipping its own content

Reported: the function description showed a vertical scrollbar and was cut off
mid-sentence.

Monaco sizes the documentation panel with
  layout(width, type.clientHeight + docs.clientHeight)
and assigns that height to the panel element (suggestWidgetDetails.js:161) —
arithmetic that assumes content-box. This app's global reset (Tailwind
preflight) makes EVERY element border-box, so the panel's own 1px top and
bottom borders were subtracted from the content height monaco had just
measured. The body was therefore always short by exactly the border and always
scrolled whenever a completion carried documentation.

Measured on the SLO aggregate field before the fix: content needed 84px, body
allocated 82px.

Restoring content-box for that one node is less fragile than trying to
out-compute the library. Verified in the browser: the full description of
approx_percentile_cont now renders on two lines with no scrollbar.

This only became visible with Phase 2, which is the first time completions
carried documentation at all — but the mismatch is ours, not monaco's: we
changed a layout assumption the library was built on.

CSS, so browser-verified rather than unit-tested. Editor suites still green.
This commit is contained in:
Prabhat Sharma 2026-08-02 14:03:24 -07:00
parent 10388f2270
commit 44b9934bb2
1 changed files with 12 additions and 0 deletions

View File

@ -1050,6 +1050,18 @@ export default defineComponent({
visibility: visible !important;
}
/* Monaco sizes the suggest documentation panel with
`layout(width, type.clientHeight + docs.clientHeight)` and assigns that height
to THIS element (suggestWidgetDetails.js:161) arithmetic that assumes
content-box. The app's global reset makes everything border-box, so the
panel's own 1px top and bottom borders eat 2px of the content it just
measured, and the documentation scrolls by exactly that sliver every time.
Restoring content-box for this one node is less fragile than trying to
out-compute the library. */
.logs-query-editor :deep(.suggest-details) {
box-sizing: content-box;
}
/* Error decoration class name is handed to monaco.deltaDecorations(), so the
element only ever exists inside Monaco's view-lines. */
.logs-query-editor :deep(.highlight-error) {