[FIX] dashboard: properly handle grid resize in dashboard mode

src/components/dashboard/dashboard.ts

@@ -21,7 +21,9 @@ import { Popover } from "../popover/popover";
 import { HorizontalScrollBar, VerticalScrollBar } from "../scrollbar/";
 import { ClickableCell, ClickableCellsStore } from "./clickable_cell_store";
 
-interface Props {}
+interface Props {
+  getGridSize: () => DOMDimension;
+}
 
 css/* scss */ `
   .o-dashboard-clickable-cell {
@@ -70,10 +72,8 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
   }
 
   get gridContainer() {
-    const sheetId = this.env.model.getters.getActiveSheetId();
-    const { right } = this.env.model.getters.getSheetZone(sheetId);
-    const { end } = this.env.model.getters.getColDimensions(sheetId, right);
-    return cssPropertiesToCss({ "max-width": `${end}px` });
+    const maxWidth = this.getMaxSheetWidth();
+    return cssPropertiesToCss({ "max-width": `${maxWidth}px` });
   }
 
   get gridOverlayDimensions() {
@@ -111,10 +111,12 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
     this.cellPopovers.close();
   }
 
-  onGridResized({ height, width }: DOMDimension) {
+  onGridResized() {
+    const { height, width } = this.props.getGridSize();
+    const maxWidth = this.getMaxSheetWidth();
     this.env.model.dispatch("RESIZE_SHEETVIEW", {
-      width: width,
-      height: height,
+      width: Math.min(maxWidth, width),
+      height,
       gridOffsetX: 0,
       gridOffsetY: 0,
     });
@@ -134,4 +136,10 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
       ...this.env.model.getters.getSheetViewDimensionWithHeaders(),
     };
   }
+
+  private getMaxSheetWidth(): Pixel {
+    const sheetId = this.env.model.getters.getActiveSheetId();
+    const { right } = this.env.model.getters.getSheetZone(sheetId);
+    return this.env.model.getters.getColDimensions(sheetId, right).end;
+  }
 }

src/components/dashboard/dashboard.xml

@@ -5,8 +5,7 @@
         <GridOverlay
           onGridResized.bind="onGridResized"
           onGridMoved.bind="moveCanvas"
-          gridOverlayDimensions="gridOverlayDimensions"
-          getGridSize="props.getGridSize">
+          gridOverlayDimensions="gridOverlayDimensions">
           <div
             t-foreach="getClickableCells()"
             t-as="clickableCell"

src/components/grid/grid.ts

@@ -450,7 +450,8 @@ export class Grid extends Component<Props, SpreadsheetChildEnv> {
     return !(rect.width === 0 || rect.height === 0);
   }
 
-  onGridResized({ height, width }: DOMDimension) {
+  onGridResized() {
+    const { height, width } = this.props.getGridSize();
     this.env.model.dispatch("RESIZE_SHEETVIEW", {
       width: width - HEADER_WIDTH,
       height: height - HEADER_HEIGHT,

src/components/grid/grid.xml

@@ -16,7 +16,6 @@
         onGridMoved.bind="moveCanvas"
         gridOverlayDimensions="gridOverlayDimensions"
         onFigureDeleted.bind="focusDefaultElement"
-        getGridSize="props.getGridSize"
       />
       <HeadersOverlay onOpenContextMenu="(type, x, y) => this.toggleContextMenu(type, x, y)"/>
       <GridComposer

src/components/grid_overlay/grid_overlay.ts

@@ -8,7 +8,6 @@ import {
   HeaderIndex,
   Pixel,
   Position,
-  Rect,
   Ref,
   SpreadsheetChildEnv,
 } from "../../types";
@@ -151,11 +150,10 @@ interface Props {
     ev: PointerEvent | MouseEvent
   ) => void;
   onCellRightClicked: (col: HeaderIndex, row: HeaderIndex, coordinates: DOMCoordinates) => void;
-  onGridResized: (dimension: Rect) => void;
+  onGridResized: () => void;
   onGridMoved: (deltaX: Pixel, deltaY: Pixel) => void;
   gridOverlayDimensions: string;
   onFigureDeleted: () => void;
-  getGridSize: () => { width: number; height: number };
 }
 
 export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
@@ -169,7 +167,6 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
     onGridMoved: Function,
     gridOverlayDimensions: String,
     slots: { type: Object, optional: true },
-    getGridSize: Function,
   };
   static components = {
     FiguresContainer,
@@ -190,14 +187,7 @@ export class GridOverlay extends Component<Props, SpreadsheetChildEnv> {
   setup() {
     useCellHovered(this.env, this.gridOverlay);
     const resizeObserver = new ResizeObserver(() => {
-      const boundingRect = this.gridOverlayEl.getBoundingClientRect();
-      const { width, height } = this.props.getGridSize();
-      this.props.onGridResized({
-        x: boundingRect.left,
-        y: boundingRect.top,
-        height: height,
-        width: width,
-      });
+      this.props.onGridResized();
     });
     onMounted(() => {
       resizeObserver.observe(this.gridOverlayEl);

src/components/spreadsheet/spreadsheet.ts

@@ -547,26 +547,25 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
   }
 
   getGridSize() {
-    const topBarHeight =
-      this.spreadsheetRef.el
-        ?.querySelector(".o-spreadsheet-topbar-wrapper")
-        ?.getBoundingClientRect().height || 0;
-    const bottomBarHeight =
-      this.spreadsheetRef.el
-        ?.querySelector(".o-spreadsheet-bottombar-wrapper")
-        ?.getBoundingClientRect().height || 0;
-
-    const gridWidth =
-      this.spreadsheetRef.el?.querySelector(".o-grid")?.getBoundingClientRect().width || 0;
-    const gridHeight =
-      (this.spreadsheetRef.el?.getBoundingClientRect().height || 0) -
-      (this.spreadsheetRef.el?.querySelector(".o-column-groups")?.getBoundingClientRect().height ||
-        0) -
-      topBarHeight -
-      bottomBarHeight;
-    return {
-      width: Math.max(gridWidth - SCROLLBAR_WIDTH, 0),
-      height: Math.max(gridHeight - SCROLLBAR_WIDTH, 0),
-    };
+    const el = this.spreadsheetRef.el;
+    if (!el) {
+      return { width: 0, height: 0 };
+    }
+    const getHeight = (selector) => el.querySelector(selector)?.getBoundingClientRect().height || 0;
+    const getWidth = (selector) => el.querySelector(selector)?.getBoundingClientRect().width || 0;
+
+    const rect = el.getBoundingClientRect();
+    const topBarHeight = getHeight(".o-spreadsheet-topbar-wrapper");
+    const bottomBarHeight = getHeight(".o-spreadsheet-bottombar-wrapper");
+    const colGroupHeight = getHeight(".o-column-groups");
+    const gridWidth = getWidth(".o-grid");
+
+    const width = Math.max(gridWidth - SCROLLBAR_WIDTH, 0);
+    const height = Math.max(
+      rect.height - topBarHeight - bottomBarHeight - colGroupHeight - SCROLLBAR_WIDTH,
+      0
+    );
+
+    return { width, height };
   }
 }