Merge pull request #171 from grafana/fix/tooltip-fontsize

[fix] Update tooltip styles
grafana · Feb 12, 2024 · 2fdaa94 · 2fdaa94
2 parents adac967 + 6574d5d
commit 2fdaa94
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 11 deletions.
diff --git a/...packages/ui/dist/assets/index-4796c824.js → ...packages/ui/dist/assets/index-5828d283.js b/...packages/ui/dist/assets/index-4796c824.js → ...packages/ui/dist/assets/index-5828d283.js
diff --git a/...ackages/ui/dist/assets/index-fa41f432.css → ...ackages/ui/dist/assets/index-98e3ee4e.css b/...ackages/ui/dist/assets/index-fa41f432.css → ...ackages/ui/dist/assets/index-98e3ee4e.css
diff --git a/dashboard/assets/packages/ui/dist/index.html b/dashboard/assets/packages/ui/dist/index.html
@@ -11,8 +11,8 @@
     <link rel="icon" type="image/svg+xml" href="./xk6-dashboard.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>k6 dashboard</title>
-    <script type="module" crossorigin src="./assets/index-4796c824.js"></script>
-    <link rel="stylesheet" href="./assets/index-fa41f432.css">
+    <script type="module" crossorigin src="./assets/index-5828d283.js"></script>
+    <link rel="stylesheet" href="./assets/index-98e3ee4e.css">
   </head>
 
   <body>

diff --git a/dashboard/assets/packages/ui/src/components/Tooltip/Tooltip.css.ts b/dashboard/assets/packages/ui/src/components/Tooltip/Tooltip.css.ts
@@ -8,7 +8,9 @@ import { vars } from "theme"
 const popperBase = style({
   border: `1px solid ${vars.colors.primary.main}`,
   borderRadius: 0,
-  padding: vars.sizes.size2,
+  fontSize: vars.fontSizes.size4,
+  maxWidth: "600px",
+  padding: vars.sizes.size4,
   zIndex: 10
 })
 

diff --git a/dashboard/assets/packages/view/dist/index.js b/dashboard/assets/packages/view/dist/index.js
@@ -114,12 +114,11 @@ function tooltipPlugin(background) {
     const style = {
       display: "none",
       position: "absolute",
-      padding: "0.2rem",
+      padding: "1rem",
       border: "1px solid #7b65fa",
       zIndex: "10",
       pointerEvents: "none",
-      margin: "0.5rem",
-      fontSize: "smaller"
+      fontSize: "1.25rem"
     };
     Object.assign(tooltip.style, style);
     u.over.appendChild(tooltip);

diff --git a/dashboard/assets/packages/view/src/tooltip.ts b/dashboard/assets/packages/view/src/tooltip.ts
@@ -11,16 +11,17 @@ export function tooltipPlugin(background: string) {
 
   function init(u: uPlot) {
     tooltip = document.createElement("div")
+
     const style: Record<string, string> = {
       display: "none",
       position: "absolute",
-      padding: "0.2rem",
+      padding: "1rem",
       border: "1px solid #7b65fa",
       zIndex: "10",
       pointerEvents: "none",
-      margin: "0.5rem",
-      fontSize: "smaller"
+      fontSize: "1.25rem"
     }
+
     Object.assign(tooltip.style, style)
     u.over.appendChild(tooltip)