make it scrollable

frontend/app/element/emojipalette.less

@@ -3,23 +3,20 @@
 
 .emoji-palette-content {
     padding: 10px;
-    max-height: 250px;
-    width: 250px;
+    max-height: 350px;
+    width: 300px;
     display: flex;
     flex-direction: column;
-
-    // > input {
-    //     margin-top: 10px;
-    // }
 }
 
 .emoji-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
-    gap: 5px;
-    justify-content: center;
-    align-items: center;
-    margin-top: 5px;
+    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
+    gap: 10px;
+    padding: 10px 0;
+    width: 100%;
+    height: 300px;
+    overflow-y: auto;
 }
 
 .emoji-button {

frontend/app/element/emojipalette.stories.tsx

@@ -1,3 +1,6 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
 import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
 import { EmojiPalette } from "./emojipalette";

frontend/app/element/emojipalette.tsx

@@ -231,7 +231,7 @@ const EmojiPalette = memo(({ scopeRef, className }: EmojiPaletteProps) => {
         return () => {
             scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
         };
-    }, []);
+    }, [scopeRef]);
 
     const handleAnchorClick = () => {
         setIsPaletteVisible((prev) => !prev);
@@ -251,6 +251,7 @@ const EmojiPalette = memo(({ scopeRef, className }: EmojiPaletteProps) => {
             {isPaletteVisible && (
                 <Palette anchorRef={anchorRef} scopeRef={scopeRef} className="emoji-palette-content">
                     <Input placeholder="Search emojis..." value={searchTerm} onChange={handleSearchChange} />
+
                     <div className="emoji-grid">
                         {filteredEmojis.length > 0 ? (
                             filteredEmojis.map((item, index) => (