diff --git a/dashboard/src/components/GraphItem.vue b/dashboard/src/components/GraphItem.vue index 9f7a82350..ffcf4931c 100644 --- a/dashboard/src/components/GraphItem.vue +++ b/dashboard/src/components/GraphItem.vue @@ -60,7 +60,7 @@ function renderTooltip(context) { innerHtml += `
${body.label}
`; }); - if (bodyLines.length > 5) innerHtml += '
...
'; + if (bodyLines.length > 5) innerHtml += '
'; tooltipElem.value.innerHTML = innerHtml; } @@ -350,7 +350,7 @@ defineExpose({ .graph { position: relative; width: 100%; - height: 160px; + height: 200px; } .footer { @@ -379,8 +379,33 @@ defineExpose({ border-right: 1px var(--pankow-color-primary) solid; } -.graphs-tooltip-item { - padding: 2px 0px; +.graphs-tooltip-item, +.graphs-tooltip-title { + padding: 2px; + padding-left: 10px; + padding-right: 10px; + background: rgba(255,255,255,0.8); +} + +@media (prefers-color-scheme: dark) { + .graphs-tooltip-item, + .graphs-tooltip-title { + background: var(--pankow-color-background); + } +} + +.graphs-tooltip-title { + padding-top: 10px; +} + +.graphs-tooltip-item:last-of-type { + padding-bottom: 10px; +} + +.graphs-tooltip-ellipsis { + font-size: 9px; + padding-top: 0; + padding-bottom: 5px !important; }