From 6e0f2d1b153e8912b772183e1db4c37fcdb98e3b Mon Sep 17 00:00:00 2001
From: Pankaj Singh <yourreshma001@gmail.com>
Date: Thu, 6 Aug 2026 13:32:19 +0530
Subject: [PATCH 1/2] fix: resolve mobile reversed text alignment issue

---
 apps/web/src/components/emoji-chat.tsx | 27 +++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/emoji-chat.tsx b/apps/web/src/components/emoji-chat.tsx
index 5172954..5d4585a 100644
--- a/apps/web/src/components/emoji-chat.tsx
+++ b/apps/web/src/components/emoji-chat.tsx
@@ -48,7 +48,7 @@ function renderMessageBody(body: string, currentParticipantId?: string, particip
           }
         >
           @{matched.displayName}
-        </span>,
+        </span>
       );
       i += 1 + matched.displayName.length;
     } else {
@@ -99,7 +99,8 @@ export function ChatMessages({
     <div
       ref={containerRef}
       onScroll={handleScroll}
-      className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2"
+      dir="ltr"
+      className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2 text-left [direction:ltr]"
     >
       {joinNotice ? (
         <p
@@ -120,17 +121,22 @@ export function ChatMessages({
           participants.some(
             (p) =>
               p.id === currentParticipantId &&
-              msg.body.toLowerCase().includes(`@${p.displayName.toLowerCase()}`),
+              msg.body.toLowerCase().includes(`@${p.displayName.toLowerCase()}`)
           );
 
         return (
           <div
             key={msg.id}
-            className={`text-sm ${mentionedYou ? "rounded-md bg-[var(--accent)]/10 px-2 py-1" : ""}`}
+            dir="ltr"
+            className={`text-sm text-left [direction:ltr] [transform:none] ${
+              mentionedYou ? "rounded-md bg-[var(--accent)]/10 px-2 py-1" : ""
+            }`}
           >
             <span className="font-medium text-[var(--accent)]">{msg.senderName}</span>
             <span className="mx-1 text-[var(--text-muted)]">·</span>
-            <span>{renderMessageBody(msg.body, currentParticipantId, participants)}</span>
+            <span dir="ltr" className="inline-block [direction:ltr] [transform:none]">
+              {renderMessageBody(msg.body, currentParticipantId, participants)}
+            </span>
           </div>
         );
       })}
@@ -223,7 +229,7 @@ export function EmojiPickerButton({ onSelect }: EmojiPickerButtonProps) {
               theme="dark"
             />
           </div>,
-          document.body,
+          document.body
         )}
     </>
   );
@@ -268,7 +274,7 @@ export function ChatInput({
           .filter((p) =>
             mentionQuery === ""
               ? true
-              : p.displayName.toLowerCase().includes(mentionQuery.toLowerCase()),
+              : p.displayName.toLowerCase().includes(mentionQuery.toLowerCase())
           )
           .slice(0, 8);
 
@@ -326,7 +332,10 @@ export function ChatInput({
   const mentionOpen = mentionQuery !== null && mentionMatches.length > 0;
 
   return (
-    <form onSubmit={handleSubmit} className="relative flex shrink-0 items-center gap-2 border-t border-[var(--border)] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]">
+    <form
+      onSubmit={handleSubmit}
+      className="relative flex shrink-0 items-center gap-2 border-t border-[var(--border)] p-3 pb-[max(0.75rem,env(safe-area-inset-bottom,0px))]"
+    >
       <EmojiPickerButton onSelect={appendEmoji} />
       <input
         ref={inputRef}
@@ -409,4 +418,4 @@ export function ChatInput({
       )}
     </form>
   );
-}
+}
\ No newline at end of file

From 133e46a762f3750bfd5f0895f5130ae4d79c1d3f Mon Sep 17 00:00:00 2001
From: Pankaj Singh <yourreshma001@gmail.com>
Date: Sat, 8 Aug 2026 00:18:50 +0530
Subject: [PATCH 2/2] Fix typescript and jsx errors in emoji-chat.tsx

---
 apps/web/src/components/emoji-chat.tsx | 45 ++++++++++++++------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/components/emoji-chat.tsx b/apps/web/src/components/emoji-chat.tsx
index 5d4585a..e0f366a 100644
--- a/apps/web/src/components/emoji-chat.tsx
+++ b/apps/web/src/components/emoji-chat.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
+import React, { useCallback, useEffect, useRef, useState, type ReactNode, type FormEvent } from "react";
 import { createPortal } from "react-dom";
 import data from "@emoji-mart/data";
 import Picker from "@emoji-mart/react";
@@ -100,7 +100,7 @@ export function ChatMessages({
       ref={containerRef}
       onScroll={handleScroll}
       dir="ltr"
-      className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2 text-left [direction:ltr]"
+      className="min-h-0 flex-1 overflow-y-auto p-3 space-y-2"
     >
       {joinNotice ? (
         <p
@@ -119,7 +119,7 @@ export function ChatMessages({
         const mentionedYou =
           !!currentParticipantId &&
           participants.some(
-            (p) =>
+            (p: Participant) =>
               p.id === currentParticipantId &&
               msg.body.toLowerCase().includes(`@${p.displayName.toLowerCase()}`)
           );
@@ -127,15 +127,18 @@ export function ChatMessages({
         return (
           <div
             key={msg.id}
-            dir="ltr"
-            className={`text-sm text-left [direction:ltr] [transform:none] ${
+            className={`text-sm ${
               mentionedYou ? "rounded-md bg-[var(--accent)]/10 px-2 py-1" : ""
             }`}
           >
             <span className="font-medium text-[var(--accent)]">{msg.senderName}</span>
             <span className="mx-1 text-[var(--text-muted)]">·</span>
-            <span dir="ltr" className="inline-block [direction:ltr] [transform:none]">
-              {renderMessageBody(msg.body, currentParticipantId, participants)}
+            <span className="inline-block [unicode-bidi:isolate]">
+              {renderMessageBody(
+                msg.body,
+                currentParticipantId,
+                participants
+              )}
             </span>
           </div>
         );
@@ -149,11 +152,11 @@ interface EmojiPickerButtonProps {
 }
 
 export function EmojiPickerButton({ onSelect }: EmojiPickerButtonProps) {
-  const [open, setOpen] = useState(false);
-  const [mounted, setMounted] = useState(false);
+  const [open, setOpen] = useState<boolean>(false);
+  const [mounted, setMounted] = useState<boolean>(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const pickerRef = useRef<HTMLDivElement>(null);
-  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [position, setPosition] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
 
   useEffect(() => setMounted(true), []);
 
@@ -203,7 +206,7 @@ export function EmojiPickerButton({ onSelect }: EmojiPickerButtonProps) {
         ref={buttonRef}
         type="button"
         onClick={() => {
-          setOpen((v) => !v);
+          setOpen((v: boolean) => !v);
           if (!open) updatePosition();
         }}
         className="rounded-lg px-2 py-1 text-lg hover:bg-[var(--bg-secondary)]"
@@ -246,10 +249,10 @@ export function ChatInput({
   lastChatAt?: number;
   participants?: Participant[];
 }) {
-  const [message, setMessage] = useState("");
-  const [now, setNow] = useState(() => Date.now());
+  const [message, setMessage] = useState<string>("");
+  const [now, setNow] = useState<number>(() => Date.now());
   const [mentionQuery, setMentionQuery] = useState<string | null>(null);
-  const [mentionIndex, setMentionIndex] = useState(0);
+  const [mentionIndex, setMentionIndex] = useState<number>(0);
   const inputRef = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
@@ -271,7 +274,7 @@ export function ChatInput({
     mentionQuery === null
       ? []
       : participants
-          .filter((p) =>
+          .filter((p: Participant) =>
             mentionQuery === ""
               ? true
               : p.displayName.toLowerCase().includes(mentionQuery.toLowerCase())
@@ -315,7 +318,7 @@ export function ChatInput({
     });
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const body = message.trim();
     if (!body || slowModeActive) return;
@@ -326,7 +329,7 @@ export function ChatInput({
 
   const appendEmoji = (emoji: string) => {
     if (slowModeActive) return;
-    setMessage((prev) => prev + emoji);
+    setMessage((prev: string) => prev + emoji);
   };
 
   const mentionOpen = mentionQuery !== null && mentionMatches.length > 0;
@@ -339,6 +342,8 @@ export function ChatInput({
       <EmojiPickerButton onSelect={appendEmoji} />
       <input
         ref={inputRef}
+        type="text"
+        dir="ltr"
         value={message}
         onChange={(e) => {
           setMessage(e.target.value);
@@ -348,12 +353,12 @@ export function ChatInput({
           if (mentionOpen) {
             if (e.key === "ArrowDown") {
               e.preventDefault();
-              setMentionIndex((i) => (i + 1) % mentionMatches.length);
+              setMentionIndex((i: number) => (i + 1) % mentionMatches.length);
               return;
             }
             if (e.key === "ArrowUp") {
               e.preventDefault();
-              setMentionIndex((i) => (i - 1 + mentionMatches.length) % mentionMatches.length);
+              setMentionIndex((i: number) => (i - 1 + mentionMatches.length) % mentionMatches.length);
               return;
             }
             if (e.key === "Enter" || e.key === "Tab") {
@@ -395,7 +400,7 @@ export function ChatInput({
           role="listbox"
           className="absolute bottom-full left-12 z-10 mb-1 max-h-40 w-56 overflow-y-auto rounded-lg border border-[var(--border)] bg-[var(--bg-secondary)] py-1 shadow-lg"
         >
-          {mentionMatches.map((p, index) => (
+          {mentionMatches.map((p: Participant, index: number) => (
             <li key={p.id} role="option" aria-selected={index === mentionIndex}>
               <button
                 type="button"