From c36aca26df6b004f34b381a8fa977801bad668c9 Mon Sep 17 00:00:00 2001
From: "Adrien Minne (adrm)" <adrm@odoo.com>
Date: Fri, 22 Nov 2024 09:29:44 +0100
Subject: [PATCH] [FIX] composer: overflow on composer at end of screen

The button to close the composer's formula assistant would overflow
for the viewport and make an additional scrollbar appear when it's
at the end of the screen (eg. standalone composer in the CF color
scale panel).

This was due to two things:
1) there was a comment with `//`, which is invalid css and disabled
the `width` property of the button
2) we were using a `CLOSE_ICON_RADIUS` to compote the position of the
formula assistant. But this constant wasn't actually used in the CSS,
so the button could have an arbitrary width unrelated to the constant.
(in practice it was 18.4px vs 18px, but this would change if we changed
the font size).

Task: 4315958
---
 src/components/composer/composer/composer.ts | 40 ++++++++++----------
 src/components/spreadsheet/spreadsheet.ts    | 10 +++++
 2 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/src/components/composer/composer/composer.ts b/src/components/composer/composer/composer.ts
index fbe757fd05..419aa83549 100644
--- a/src/components/composer/composer/composer.ts
+++ b/src/components/composer/composer/composer.ts
@@ -92,10 +92,10 @@ css/* scss */ `
     }
 
     .fa-stack {
-      // reset stack size which is doubled by default
-      width: 1em;
-      height: 1em;
-      line-height: 1em;
+      /* reset stack size which is doubled by default */
+      width: ${CLOSE_ICON_RADIUS * 2}px;
+      height: ${CLOSE_ICON_RADIUS * 2}px;
+      line-height: ${CLOSE_ICON_RADIUS * 2}px;
     }
 
     .force-open-assistant {
@@ -496,22 +496,22 @@ export class Composer extends Component<CellComposerProps, SpreadsheetChildEnv>
   }
 
   onBlur(ev: FocusEvent) {
-    if (this.props.composerStore.editionMode === "inactive") {
-      return;
-    }
-    const target = ev.relatedTarget;
-    if (!target || !(target instanceof HTMLElement)) {
-      this.props.composerStore.stopEdition();
-      return;
-    }
-    if (target.attributes.getNamedItem("composerFocusableElement")) {
-      this.contentHelper.el.focus();
-      return;
-    }
-    if (target.classList.contains("o-composer")) {
-      return;
-    }
-    this.props.composerStore.stopEdition();
+    // if (this.props.composerStore.editionMode === "inactive") {
+    //   return;
+    // }
+    // const target = ev.relatedTarget;
+    // if (!target || !(target instanceof HTMLElement)) {
+    //   this.props.composerStore.stopEdition();
+    //   return;
+    // }
+    // if (target.attributes.getNamedItem("composerFocusableElement")) {
+    //   this.contentHelper.el.focus();
+    //   return;
+    // }
+    // if (target.classList.contains("o-composer")) {
+    //   return;
+    // }
+    // this.props.composerStore.stopEdition();
   }
 
   updateAutoCompleteIndex(index: number) {
diff --git a/src/components/spreadsheet/spreadsheet.ts b/src/components/spreadsheet/spreadsheet.ts
index 5a0e847d4b..a1e3f809a4 100644
--- a/src/components/spreadsheet/spreadsheet.ts
+++ b/src/components/spreadsheet/spreadsheet.ts
@@ -450,6 +450,16 @@ export class Spreadsheet extends Component<SpreadsheetProps, SpreadsheetChildEnv
       this.checkViewportSize();
       stores.on("store-updated", this, render);
       resizeObserver.observe(this.spreadsheetRef.el!);
+      this.env.model.selection.selectZone(
+        {
+          cell: { col: 6, row: 2 },
+          zone: { top: 2, bottom: 2, left: 6, right: 6 },
+        },
+        { scrollIntoView: false }
+      );
+      this.sidePanel.open("ConditionalFormatting", {
+        selection: this.env.model.getters.getSelectedZones(),
+      });
     });
     onWillUnmount(() => {
       this.unbindModelEvents();