This is an automated email from the ASF dual-hosted git repository. wu-sheng pushed a commit to branch fix/log-popout-min-height in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
commit a005ab89dac1e70cd278f3c4220d6cd25a95ead5 Author: Wu Sheng <[email protected]> AuthorDate: Wed May 27 22:09:15 2026 +0800 fix(logs): log-entry popout reads cramped — min-height + wider cap `.lg-popout` only set `max-height: 86vh` (a cap, not a target). With short payloads (one-line TEXT log + a few key/value tags) the flex column collapsed to natural content height (~300px) and the modal read as a small toast in the middle of the viewport, nowhere near the 86vh budget. `.lg-popout-body` already had `flex: 1` — it just had no parent height to absorb. Add `min-height: 70vh` so the box is visually consistent across short and long logs, and bump the cap from `86vh` to `92vh` to give long payloads more room. The body's existing `flex: 1` claims the extra space cleanly. --- apps/ui/src/layer/logs/LayerLogsView.vue | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/ui/src/layer/logs/LayerLogsView.vue b/apps/ui/src/layer/logs/LayerLogsView.vue index 3916fe1..ed55175 100644 --- a/apps/ui/src/layer/logs/LayerLogsView.vue +++ b/apps/ui/src/layer/logs/LayerLogsView.vue @@ -1540,7 +1540,14 @@ function jumpToTrace(traceId: string, ts?: number): void { } .lg-popout { width: min(1100px, 92vw); - max-height: 86vh; + /* `max-height` alone is just a cap — with short payloads (one-line + TEXT log + a handful of keys) the flex column collapses to natural + content height (~300px) and the modal reads as cramped despite the + 86vh budget. `min-height: 70vh` makes the box visually consistent + across short and long logs; the body's `flex: 1` then absorbs the + extra space cleanly. 92vh cap leaves a small backdrop margin. */ + min-height: 70vh; + max-height: 92vh; display: flex; flex-direction: column; overflow: hidden;
