diff --git a/web/src/components/base/BaseScrollbar.vue b/web/src/components/base/BaseScrollbar.vue
index 6e06d7b43..b3cf4b09d 100644
--- a/web/src/components/base/BaseScrollbar.vue
+++ b/web/src/components/base/BaseScrollbar.vue
@@ -26,6 +26,7 @@ const visible = shallowRef(false)
const dragging = shallowRef(false)
let resizeObserver: ResizeObserver | undefined
+let hideTimer: number | undefined
let dragStartY = 0
let dragStartScrollTop = 0
@@ -56,12 +57,34 @@ function showScrollbar() {
visible.value = true
}
+function clearHideTimer() {
+ window.clearTimeout(hideTimer)
+ hideTimer = undefined
+}
+
+function scheduleHideScrollbar() {
+ clearHideTimer()
+ if (props.forceVisible || dragging.value) {
+ return
+ }
+
+ hideTimer = window.setTimeout(() => {
+ hideScrollbar()
+ }, 900)
+}
+
function hideScrollbar() {
- if (!dragging.value) {
+ clearHideTimer()
+ if (!props.forceVisible && !dragging.value) {
visible.value = false
}
}
+function activateScrollbar() {
+ showScrollbar()
+ scheduleHideScrollbar()
+}
+
function update() {
const wrap = wrapRef.value
if (!wrap) {
@@ -74,6 +97,7 @@ function update() {
thumbHeight.value = 0
thumbTop.value = 0
visible.value = false
+ clearHideTimer()
return
}
@@ -90,6 +114,7 @@ async function scrollToTop() {
}
dragging.value = false
visible.value = false
+ clearHideTimer()
await nextTick()
update()
}
@@ -101,7 +126,7 @@ function handleScroll() {
}
update()
- showScrollbar()
+ activateScrollbar()
emit('scroll', {
scrollTop: wrap.scrollTop,
scrollLeft: wrap.scrollLeft,
@@ -119,6 +144,7 @@ function handleTrackPointerDown(event: PointerEvent) {
}
const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()
+ activateScrollbar()
const nextThumbTop = event.clientY - rect.top - thumbHeight.value / 2
const scrollRange = maxScrollTop(wrap)
const thumbRange = maxThumbTop(wrap)
@@ -137,6 +163,7 @@ function handleThumbPointerDown(event: PointerEvent) {
event.preventDefault()
dragging.value = true
visible.value = true
+ clearHideTimer()
dragStartY = event.clientY
dragStartScrollTop = wrap.scrollTop
document.addEventListener('pointermove', handleThumbPointerMove)
@@ -161,7 +188,7 @@ function handleThumbPointerMove(event: PointerEvent) {
function handleThumbPointerUp() {
dragging.value = false
document.removeEventListener('pointermove', handleThumbPointerMove)
- showScrollbar()
+ activateScrollbar()
}
onMounted(async () => {
@@ -177,6 +204,7 @@ onMounted(async () => {
})
onBeforeUnmount(() => {
+ clearHideTimer()
resizeObserver?.disconnect()
document.removeEventListener('pointermove', handleThumbPointerMove)
})
@@ -193,7 +221,7 @@ defineExpose({
diff --git a/web/src/components/base/BaseTable/index.vue b/web/src/components/base/BaseTable/index.vue
index 00f781c67..41cf3ea87 100644
--- a/web/src/components/base/BaseTable/index.vue
+++ b/web/src/components/base/BaseTable/index.vue
@@ -113,7 +113,7 @@ function fixedHeaderClass(column: BaseTableColumn) {
return [
'sticky left-0 z-30 bg-(--cp-bg-subtle)',
- horizontalScrolled.value ? 'shadow-[8px_0_14px_-14px_rgba(15,23,42,0.38)]' : undefined,
+ horizontalScrolled.value ? 'shadow-[8px_0_14px_-14px_var(--cp-shadow-sticky)]' : undefined,
]
}
@@ -124,7 +124,7 @@ function fixedBodyClass(column: BaseTableColumn, row: TableRow, index: number) {
return [
'sticky left-0 z-20',
- horizontalScrolled.value ? 'shadow-[8px_0_14px_-14px_rgba(15,23,42,0.38)]' : undefined,
+ horizontalScrolled.value ? 'shadow-[8px_0_14px_-14px_var(--cp-shadow-sticky)]' : undefined,
isRowSelected(row, index)
? 'bg-(--cp-bg-tertiary)'
: props.stripe && index % 2 === 1
diff --git a/web/src/layout/components/AppSidebar.vue b/web/src/layout/components/AppSidebar.vue
index aea439dd5..a91e28ced 100644
--- a/web/src/layout/components/AppSidebar.vue
+++ b/web/src/layout/components/AppSidebar.vue
@@ -1,25 +1,32 @@
@@ -38,10 +38,10 @@ function cellClass(point: string) {
class="flex items-center gap-2 text-[11px] leading-none font-[650] text-(--cp-text-muted)"
>
{{ timeline.oldestLabel }}
-
-
-
-
+
+
+
+
{{ timeline.newestLabel }}
diff --git a/web/src/views/dashboard/components/RequestTrendCard.vue b/web/src/views/dashboard/components/RequestTrendCard.vue
index 7d3f6fca5..a0ee8d059 100644
--- a/web/src/views/dashboard/components/RequestTrendCard.vue
+++ b/web/src/views/dashboard/components/RequestTrendCard.vue
@@ -1,10 +1,12 @@