Improve readability of graph tooltips

dashboard/src/components/GraphItem.vue

@@ -60,7 +60,7 @@ function renderTooltip(context) {
       innerHtml += `<div style="color: ${body.color}" class="graphs-tooltip-item">${body.label}</div>`;
     });
 
-    if (bodyLines.length > 5) innerHtml += '<div>...</div>';
+    if (bodyLines.length > 5) innerHtml += '<div class="graphs-tooltip-item graphs-tooltip-ellipsis">&#8943;</div>';
 
     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;
 }
 
 </style>