1001 viz roots overflow behavior is causing ghost scrollbar

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/main/dashboard-editor/settings/content/edit-panel/preview-viz.tsx

@@ -1,3 +1,4 @@
+import { Flex } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useContentModelContext, usePanelContext } from '../../../../../contexts';
 import { Viz } from '../../../../../panel/viz';
@@ -11,5 +12,9 @@ export const PreviewViz = observer(({ height }: { height: string }) => {
     panel: { viz, queryID },
   } = usePanelContext();
   const query = content.queries.findByID(queryID);
-  return <Viz viz={viz} data={data} loading={loading} error={error} query={query} height={height} />;
+  return (
+    <Flex direction="column" sx={{ width: '100%', height }}>
+      <Viz viz={viz} data={data} loading={loading} error={error} query={query} />
+    </Flex>
+  );
 });

dashboard/src/panel/index.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@mantine/core';
+import { Box, Flex } from '@mantine/core';
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
 import { PanelModelInstance } from '~/model/panels';
@@ -54,7 +54,7 @@ export const Panel = observer(function _Panel({ panel, view }: IPanel) {
   const panelNeedData = doesVizRequiresData(panel.viz.type);
   const loading = panelNeedData && state === 'loading';
 
-  const vizHeight = !panel.title ? '100%' : 'calc(100% - 25px - 5px)';
+  const contentHeight = !panel.title ? '100%' : 'calc(100% - 25px - 5px)';
   const panelStyle = getPanelBorderStyle(panel, panelNeedData, inEditMode);
   const needDropdownMenu = panelNeedData || inEditMode;
   return (
@@ -72,7 +72,9 @@ export const Panel = observer(function _Panel({ panel, view }: IPanel) {
         </Box>
         {needDropdownMenu && <PanelDropdownMenu view={view} />}
         <PanelTitleBar />
-        <Viz viz={panel.viz} data={data} loading={loading} error={error} height={vizHeight} query={query} />
+        <Flex direction="column" sx={{ height: contentHeight }}>
+          <Viz viz={panel.viz} data={data} loading={loading} error={error} query={query} />
+        </Flex>
       </Box>
     </PanelContextProvider>
   );

dashboard/src/panel/viz/index.tsx

@@ -54,27 +54,26 @@ interface IViz {
   viz: IVizConfig;
   data: TVizData;
   loading: boolean;
-  height: string;
   error?: string;
   query?: QueryModelInstance;
 }
 
-export const Viz = observer(function _Viz({ height: vizRootHeight, viz, data, loading, error, query }: IViz) {
+export const Viz = observer(function _Viz({ viz, data, loading, error, query }: IViz) {
   const { ref, width, height } = useElementSize();
 
   const pluginViz = usePluginViz(data, { w: width, h: height });
   const dontNeedData = typesDontNeedData.includes(viz.type);
   if (dontNeedData) {
     return (
-      <div className="viz-root" style={{ height: vizRootHeight }} ref={ref}>
+      <div className="viz-root" ref={ref}>
         <ErrorBoundary>{pluginViz}</ErrorBoundary>
       </div>
     );
   }
 
   if (loading) {
     return (
-      <div className="viz-root" style={{ height: vizRootHeight, position: 'relative' }} ref={ref}>
+      <div className="viz-root" style={{ position: 'relative' }} ref={ref}>
         <LoadingOverlay visible={loading} exitTransitionDuration={0} />
       </div>
     );
@@ -83,7 +82,7 @@ export const Viz = observer(function _Viz({ height: vizRootHeight, viz, data, lo
   const showStateMessage = !showError && !!query?.stateMessage;
   const showViz = !showError && !showStateMessage;
   return (
-    <div className="viz-root" style={{ height: vizRootHeight }} ref={ref}>
+    <div className="viz-root" ref={ref}>
       {showError && (
         <Text color="red" size="md" align="center" sx={{ fontFamily: 'monospace' }}>
           {error}

dashboard/src/plugins/viz-components/cartesian/option/grid.ts

@@ -2,7 +2,7 @@ import { ICartesianChartConf } from '../type';
 
 export function getGrid(conf: ICartesianChartConf) {
   const hasYAxisName = conf.y_axes.some((y) => !!y.name);
-  let top = 10;
+  let top = 15;
   if (hasYAxisName) {
     top += 20;
   }
@@ -20,6 +20,9 @@ export function getGrid(conf: ICartesianChartConf) {
 
   return {
     top,
+    right: 15,
     bottom,
+    left: 20,
+    containLabel: true,
   };
 }

dashboard/src/plugins/viz-components/cartesian/option/index.ts

@@ -34,13 +34,6 @@ const defaultOption = {
       },
     },
   ],
-  grid: {
-    top: 10,
-    left: 20,
-    right: 15,
-    bottom: 25,
-    containLabel: true,
-  },
 };
 
 export function getOption(conf: ICartesianChartConf, data: TVizData, variables: ITemplateVariable[]) {

dashboard/src/plugins/viz-components/heatmap/option/grid.ts

@@ -11,5 +11,6 @@ export function getGrid(conf: IHeatmapConf) {
     left: 5,
     right: 5,
     bottom,
+    containLabel: true,
   };
 }

dashboard/src/plugins/viz-components/heatmap/option/index.ts

@@ -13,9 +13,6 @@ const defaultOption = {
   tooltip: {
     confine: true,
   },
-  grid: {
-    containLabel: true,
-  },
 };
 
 export function getOption(conf: IHeatmapConf, data: TVizData, variables: ITemplateVariable[]) {

dashboard/src/plugins/viz-components/scatter-chart/option/grid.ts

@@ -2,7 +2,7 @@ import { IScatterChartConf } from '../type';
 
 export function getGrid(conf: IScatterChartConf) {
   const hasYAxisName = conf.y_axes.some((y) => !!y.name);
-  let top = 10;
+  let top = 15;
   if (hasYAxisName) {
     top += 20;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,16 +2,16 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "9.14.1",
+  "version": "9.14.2",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@ahooksjs/use-url-state": "^3.3.11",
-    "@devtable/dashboard": "9.14.1",
-    "@devtable/settings-form": "9.14.1",
+    "@devtable/dashboard": "9.14.2",
+    "@devtable/settings-form": "9.14.2",
     "@emotion/react": "11.10.6",
     "@faker-js/faker": "7.6.0",
     "@mantine/core": "5.9.5",