fix: emoji display

src/common/component/Message/ReactionPicker.tsx

@@ -19,6 +19,13 @@ const ReactionPicker: FC<Props> = ({ mid, hidePicker }) => {
   const handleReact = (emoji: string) => {
     reactMessage({ mid, action: emoji });
     hidePicker();
+    // scroll in to view
+    const el = document.querySelector(`[data-msg-mid='${mid}']`);
+    // console.log("eee", el);
+    if (el) {
+      el.scrollIntoViewIfNeeded(false);
+    }
+
   };
   return (
     <div className="z-[999]">

src/common/polyfills.js

@@ -0,0 +1,18 @@
+// scrollIntoViewIfNeeded
+const isSupported = "scrollIntoViewIfNeeded" in Element.prototype;
+if (!isSupported) {
+  Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
+    const el = this;
+    new IntersectionObserver(function ([entry]) {
+      const ratio = entry.intersectionRatio;
+      if (ratio < 1) {
+        let place = ratio <= 0 && centerIfNeeded ? "center" : "nearest";
+        el.scrollIntoView({
+          block: place,
+          inline: place
+        });
+      }
+      this.disconnect();
+    }).observe(this);
+  };
+}

src/index.tsx

@@ -14,6 +14,7 @@ import ReduxRoutes from "./routes";
 import NewVersion from "./common/component/NewVersion";
 // import i18n (needs to be bundled ;)) 
 import './i18n';
+import './common/polyfills';
 import { isDarkMode } from './common/utils';
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

src/types/global.d.ts

@@ -42,5 +42,8 @@ export declare global {
   interface WindowEventMap {
     beforeinstallprompt: BeforeInstallPromptEvent;
   }
+  interface Element {
+    scrollIntoViewIfNeeded?: any;
+  }
 }
 export type ShareScreenTrack = ILocalVideoTrack | [ILocalVideoTrack, ILocalAudioTrack];