From 2e7bccf6044fbe867aabd893eea0e80bf113463d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Mon, 11 Apr 2022 13:10:33 +0200 Subject: [PATCH] fix(dashboard-v2): bound graph labels to the container box --- .../src/components/CurrentUsage/GraphBar.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js index 96421f6e..1afab541 100644 --- a/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js +++ b/packages/dashboard-v2/src/components/CurrentUsage/GraphBar.js @@ -12,11 +12,13 @@ const BarTip = styled.span.attrs({ })``; const BarLabel = styled.span.attrs({ - className: "bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow", + className: "usage-label bg-white rounded border-2 border-palette-200 px-3 whitespace-nowrap absolute shadow", })` - right: max(0%, ${({ $percentage }) => 100 - $percentage}%); - top: -0.5rem; - transform: translateX(50%); + ${({ $percentage }) => ` + left: max(0%, ${$percentage}%); + top: -0.5rem; + transform: translateX(-${$percentage}%); + `} `; export const GraphBar = ({ value, limit, label }) => {