From 81ed7cb4ca77635d846086972e99cd494e8a267f Mon Sep 17 00:00:00 2001
From: Nemael <mapa@odoo.com>
Date: Mon, 26 Sep 2022 11:40:48 +0000
Subject: [PATCH] [FIX] mail: fix horizontal scrollbar of emoji popover on
 windows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On windows, displayed emojis are bigger than the expected size
This commit removes the horizontal scrolbar that would appear
on Windows

Task-2991415

closes odoo/odoo#101347

X-original-commit: 578157fbbae92afa1581193df9173fd085fd9f09
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../src/components/emoji_grid_view/emoji_grid_view.scss     | 2 +-
 .../src/components/emoji_grid_view/emoji_grid_view.xml      | 4 ++--
 addons/mail/static/src/models/emoji_grid_view.js            | 6 ++++--
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
index 2fad438ef90..07746aaafcd 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.scss
@@ -6,7 +6,7 @@
     height: auto;
     width: auto;
     overflow-y: scroll;
-    overflow-x: visible;
+    overflow-x: hidden;
 }
 
 .o_EmojiGridView_list {
diff --git a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
index feacf0fdcee..fb7e63be43f 100644
--- a/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
+++ b/addons/mail/static/src/components/emoji_grid_view/emoji_grid_view.xml
@@ -2,10 +2,10 @@
 <templates xml:space="preserve">
 
     <t t-name="mail.EmojiGridView" owl="1">
-    <div class="o_EmojiGridView o_EmojiGridView_container" t-attf-style="--rowHeight: {{emojiGridView.rowHeight}}px; --itemWidth: {{emojiGridView.itemWidth}}px; height: {{emojiGridView.height}}; width: {{emojiGridView.width}};" t-on-scroll="emojiGridView.onScroll" t-ref="containerRef">
+    <div class="o_EmojiGridView o_EmojiGridView_container" t-attf-style="--rowHeight: {{emojiGridView.rowHeight}}px; --itemWidth: {{emojiGridView.itemWidth}}px; height: {{emojiGridView.height}}px; width: {{emojiGridView.width}}px;" t-on-scroll="emojiGridView.onScroll" t-ref="containerRef">
         <EmojiGridSearchNoContentView t-if="emojiGridView.searchNoContentView" record="emojiGridView.searchNoContentView"/>
         <div t-if="!emojiGridView.searchNoContentView" class="o_EmojiGridView_list" t-attf-style="height: {{emojiGridView.listHeight}}px; min-height: {{emojiGridView.listHeight}}px;" t-ref="listRef">
-            <div t-if="emojiGridView.lastRenderedRowIndex >= emojiGridView.firstRenderedRowIndex" class="o_EmojiGridView_viewBlock" t-attf-style="top: {{ emojiGridView.distanceFromTop - emojiGridView.distanceInRowOffset }}px; width: {{ emojiGridView.width }};" t-ref="viewBlockRef">
+            <div t-if="emojiGridView.lastRenderedRowIndex >= emojiGridView.firstRenderedRowIndex" class="o_EmojiGridView_viewBlock" t-attf-style="top: {{ emojiGridView.distanceFromTop - emojiGridView.distanceInRowOffset }}px; width: {{ emojiGridView.width }}px;" t-ref="viewBlockRef">
                 <EmojiGridRowView t-foreach="emojiGridView.renderedRows" t-as="row" t-key="row" record="row"/>
             </div>
         </div>
diff --git a/addons/mail/static/src/models/emoji_grid_view.js b/addons/mail/static/src/models/emoji_grid_view.js
index 41032df92a6..9ff359fffeb 100644
--- a/addons/mail/static/src/models/emoji_grid_view.js
+++ b/addons/mail/static/src/models/emoji_grid_view.js
@@ -109,7 +109,9 @@ registerModel({
             default: 0,
         }),
         height: attr({
-            default: "275px",
+            compute() {
+                return this.rowHeight * 9.5;
+            },
         }),
         itemWidth: attr({
             default: 30,
@@ -210,7 +212,7 @@ registerModel({
         viewBlockRef: attr(),
         width: attr({
             compute() {
-                return `${this.itemWidth * this.amountOfItemsPerRow + this.scrollbarThresholdWidth}px`;
+                return this.itemWidth * this.amountOfItemsPerRow + this.scrollbarThresholdWidth;
             },
         }),
     },