Consul UI KV viewer missing vertical scrollbar and browser search (Ctrl+F) not working for long values (regression from 1.17.x)

[snipy77]

Describe the bug

After upgrading Consul from 1.17.1 to 1.22.1 / 1.22.2, the Key/Value (KV) UI in the web interface exhibits two regressions:

Vertical scrollbar missing

Long values cannot be scrolled properly in the UI.

Previously (1.17.1), a scrollbar appeared automatically for large values.

Browser search (Ctrl+F) cannot find values outside the visible viewport

Previously (1.17.1), the browser could find any key or value regardless of visibility.

Now, the search only works for values currently rendered in the viewport.

Steps to reproduce

Run Consul 1.22.1 / 1.22.2

Open the Web UI → Key/Value

Select a key with a long, multi-line value

Attempt to scroll → no vertical scrollbar

Attempt Ctrl+F in the browser for a key/value not currently visible → not found

Expected behavior

The KV viewer should display a vertical scrollbar for all long values.

Browser search (Ctrl+F) should be able to locate all keys and values, as it did in 1.17.1.

Actual behavior

Vertical scroll is missing → content may be truncated and not scrollable

Browser search cannot find keys/values outside the rendered viewport

Technical analysis

Scrollbar issue

UI now uses CodeMirror 6, which uses flexbox and virtual rendering.

CSS currently sets:

.cm-scroller {
height: 100%;
overflow-x: auto;
/* missing overflow-y */
}

A manual CSS fix can temporarily restore scrolling:

.cm-scroller {
overflow-y: auto;
max-height: 80vh;
}

Browser search issue

CodeMirror 6 implements virtual rendering, so only visible lines exist in the DOM.

Browser Ctrl+F only searches the DOM → invisible lines are ignored.

This is a regression compared to 1.17.1 where all text was fully rendered.

Could you please confirm whether this is a general issue affecting all users or an isolated case?

Thank you in advance for your help.

[snipy77]

.ͼ1 .cm-scroller {
display: flex !important
;
align-items: flex-start !important;
font-family: monospace;
line-height: 1.4;
height: 100%;
overflow-x: auto;
position: relative;
z-index: 0;
overflow-anchor: none;
}

[snipy77]

The KV value container (.cm-scroller) is defined with height: 100% but its parent element does not have a constrained height. In addition, overflow-y is not set (only overflow-x: auto). As a result, vertical scrolling is never triggered. Manually forcing max-height and overflow-y: auto restores the scrollbar, confirming this is a UI layout issue.