This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-horizon-ui.git
The following commit(s) were added to refs/heads/main by this push:
new ccb59b6 ui trace popout: sticky time-axis must cover scrolling rows
cleanly
ccb59b6 is described below
commit ccb59b6224ab821343f47145e566488a293a0a56
Author: Wu Sheng <[email protected]>
AuthorDate: Sun May 17 17:41:39 2026 +0800
ui trace popout: sticky time-axis must cover scrolling rows cleanly
Symptom (ui-12.png): on the trace popup, scrolling the waterfall
let the first span's bar bleed through the sticky time-axis row at
the top — axis tick labels rendered on top of the green bar text.
Cause: the row's bar is `position: absolute` inside a `position:
relative` track. Sibling-render order under the parent scroll
container can let absolute-positioned descendants paint above a
sticky sibling with low z-index in some webkit stacking quirks. The
axis was at z-index 2 with `background:` shorthand which can be
overridden in some computed contexts.
Fix on both TracePopout (SkyWalking native) and ZipkinTracePopout:
- z-index 2 → 10 (well clear of any default-z absolute siblings).
- `background:` shorthand → explicit `background-color`.
- Extra `box-shadow: 0 2px 6px rgba(0,0,0,0.35)` so the axis reads
as a floating header when scrolled, with a visual cut between it
and the first row.
Also bumped Zipkin's axis to `position: sticky; top: 0;` — it was
non-sticky before, which meant the axis scrolled out of view
entirely on long traces.
---
apps/ui/src/layer/traces/TracePopout.vue | 16 +++++++++++++---
apps/ui/src/layer/traces/ZipkinTracePopout.vue | 8 ++++++++
2 files changed, 21 insertions(+), 3 deletions(-)
diff --git a/apps/ui/src/layer/traces/TracePopout.vue
b/apps/ui/src/layer/traces/TracePopout.vue
index ae6c4c3..efa6bf9 100644
--- a/apps/ui/src/layer/traces/TracePopout.vue
+++ b/apps/ui/src/layer/traces/TracePopout.vue
@@ -528,12 +528,22 @@ function nativeSpanError(s: NativeSpan): boolean { return
s.isError; }
.tp-time-axis {
position: sticky;
top: 0;
- z-index: 2;
+ /* High enough to clear the `.tp-bar` (position: absolute) inside
+ * scrolled rows; z-index 2 was being rendered behind the bars on
+ * scroll because absolute-positioned siblings can paint above
+ * sticky in some webkit stacking quirks. 10 is plenty. */
+ z-index: 10;
display: flex;
justify-content: space-between;
- padding: 4px 12px;
- background: var(--sw-bg-1);
+ padding: 6px 12px;
+ /* Solid color (not shorthand) so the row content underneath is
+ * fully obscured when the axis sticks during scroll. */
+ background-color: var(--sw-bg-1);
border-bottom: 1px solid var(--sw-line);
+ /* Soft shadow under the axis once scrolled — gives the axis a
+ * "floating header" feel and visually separates it from the first
+ * row even on dense traces. */
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
font-family: var(--sw-mono);
font-size: 10px;
color: var(--sw-fg-3);
diff --git a/apps/ui/src/layer/traces/ZipkinTracePopout.vue
b/apps/ui/src/layer/traces/ZipkinTracePopout.vue
index e601bf9..3697377 100644
--- a/apps/ui/src/layer/traces/ZipkinTracePopout.vue
+++ b/apps/ui/src/layer/traces/ZipkinTracePopout.vue
@@ -334,10 +334,18 @@ function copyTraceId(): void {
padding: 0;
}
.zk-time-axis {
+ position: sticky;
+ top: 0;
+ z-index: 10;
display: flex;
justify-content: space-between;
padding: 6px 12px;
+ /* Solid background + shadow so the axis cleanly overlays the
+ * scrolling rows underneath rather than letting the first row's
+ * bar bleed through (sibling rendering on scroll). */
+ background-color: var(--sw-bg-1);
border-bottom: 1px solid var(--sw-line);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
font-size: 10px;
color: var(--sw-fg-3);
font-family: var(--sw-mono);
