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;
}