fix: chart gesture icons overlap on mouse hover

awslabs · Feb 28, 2024 · b5e5c0d · b5e5c0d
1 parent dde49e6
commit b5e5c0d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 2 deletions.
diff --git a/packages/dashboard/src/components/widgets/widgetActions.css b/packages/dashboard/src/components/widgets/widgetActions.css
@@ -2,6 +2,6 @@
   display: flex;
   align-items: center;
   position: absolute;
-  top: -20px;
+  top: -18px;
   z-index: 999; /* Widget actions toolbox should be above the widget container */
 }
diff --git a/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts b/packages/react-components/src/components/chart/chartOptions/useChartConfiguration.ts
@@ -34,7 +34,7 @@ const useTitle = ({
   return useMemo(
     () => ({
       text: hasSeries ? titleText ?? '' : 'No data present',
-      padding: [0, 12],
+      padding: [4, 12],
       textStyle: {
         width: chartWidth - 90, // Decreased 90px width from chart width for title to avoid overlapping with the title and zoom in and out buttons
         overflow: 'truncate',

diff --git a/packages/react-components/src/components/chart/eChartsConstants.ts b/packages/react-components/src/components/chart/eChartsConstants.ts
@@ -11,6 +11,7 @@ import type {
 export const DEFAULT_TOOLBOX_CONFIG: ToolboxComponentOption = {
   show: true,
   right: 30,
+  top: 6, // top 6 is to avoid the overalping of echart toolbox with widget toolbox
   feature: {
     dataZoom: { title: { back: 'Undo\nzoom' }, filterMode: 'none' },
   },