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

[rmbh-odoo]

Description:

Current behavior before PR:

• The canvas size was computed from the grid, which caused visible white margins
  after a snappy resize (commit 3c8df4b9).
• Some unused props were being passed, creating unnecessary code clutter.

Desired behavior after PR is merged:

• The dashboard canvas size is now computed from the gridRef, ensuring only the
  visible parts are displayed and avoiding redundant canvas computations.

Task: 5223156

review checklist

• feature is organized in plugin, or UI components
• support of duplicate sheet (deep copy)
• in model/core: ranges are Range object, and can be adapted (adaptRanges)
• in model/UI: ranges are strings (to show the user)
• undo-able commands (uses this.history.update)
• multiuser-able commands (has inverse commands and transformations where needed)
• new/updated/removed commands are documented
• exportable in excel
• translations (_t("qmsdf %s", abc))
• unit tested
• clean commented code
• track breaking changes
• doc is rebuild (npm run doc)
• status is correct in Odoo

[robodoo]

[rrahir]

if I understand the issue correctly, we miss the actual computation of the spreadsheet width when in dashboard mode. have you looked into a way to correct that as well? because right now we have a discrepency between the canvas size and the actual part displayed to the client and I'm not sure that just hiding it is the best solution (maybe it's too complicated to fix and it's the right call, but i'm curious to know if looked into it)

[rrahir]

I fear this could break in later versions because of the introduction of the zoom (which still has to be implemented properly for dashboard but still) due to some weird stuff happening in safari which pretty much forces us to rely on the width and height because it is not affected similarly by the zoom depending on different browsers, see https://www.odoo.com/odoo/2328/tasks/5232092

[rrahir]

Suggested change

	const rect = this.gridRef.el?.getBoundingClientRect();
	const { height } = this.props.getGridSize();
	const sheetId = this.env.model.getters.getActiveSheetId();
	const { right } = this.env.model.getters.getSheetZone(sheetId);
	const width = this.env.model.getters.getColDimensions(sheetId, right).end;

this takes advantage of the future zoom issue and the computed width (something we already do in SpreadsheetDashboard.gridContainer) Wdyt?

[rmbh-odoo]

That solution doesn’t work because it sets a fixed max-width on the canvas on every resize, which doesn’t make sense and causes the layout bug. See the related issue here

I think we should fix this issue here, since this version doesn’t include Zoom functionality.
In the master, we’ll likely need to refactor the layout to align with the zoom behavior.
I’ll take some time to investigate what’s happening in the master 🥲

[rrahir]

Here is the diff I applied on my end, I did not experience the same issue as you do and when pushed it in Odoo ,I get the right positioning (and style) at first render

I rushed my explanation in my previous post but I think that it's a correct approach?

diff --git a/src/components/dashboard/dashboard.ts b/src/components/dashboard/dashboard.ts
index a54b218d57..96bf59dd45 100644
--- a/src/components/dashboard/dashboard.ts
+++ b/src/components/dashboard/dashboard.ts
@@ -103,8 +103,11 @@ export class SpreadsheetDashboard extends Component<Props, SpreadsheetChildEnv>
   }
 
   onGridResized({ height, width }: DOMDimension) {
+    const sheetId = this.env.model.getters.getActiveSheetId();
+    const { right } = this.env.model.getters.getSheetZone(sheetId);
+    const width2 = this.env.model.getters.getColDimensions(sheetId, right).end;
     this.env.model.dispatch("RESIZE_SHEETVIEW", {
-      width: width,
+      width: Math.min(width, width2),
       height: height,
       gridOffsetX: 0,
       gridOffsetY: 0,

[rrahir]

the diff was aplied in master but it's the same idea

[rmbh-odoo]

Honestly, that’s a brilliant move 🫡