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;
             },
         }),
     },