fix: fix chat visual text alignment issues on chat opening

Author: zardoy

src/react/Chat.css

@@ -4,19 +4,26 @@ div.chat-wrapper {
   /* z-index: 10; */
   padding-left: calc(env(safe-area-inset-left) / 2);
   padding-right: calc(env(safe-area-inset-right, 4px) / 2);
+  box-sizing: content-box;
+  overflow: hidden;
 }
 
 .chat-messages-wrapper {
   bottom: 40px;
   padding: 4px;
   padding-left: 0;
   max-height: var(--chatHeight);
-  width: var(--chatWidth);
+  width: calc(var(--chatWidth) - 5px); /* Custom scrollbar width */
   transform-origin: bottom left;
   transform: scale(var(--chatScale));
   pointer-events: none;
 }
 
+/* Restore full width when chat is opened */
+.chat-messages-wrapper.chat-opened {
+  width: var(--chatWidth);
+}
+
 .chat-input-wrapper {
   bottom: 1px;
   width: calc(100% - 3px);

src/react/Chat.tsx

@@ -18,6 +18,7 @@ const MessageLine = ({ message, currentPlayerName, chatOpened }: { message: Mess
   const [fadeState, setFadeState] = useState<'visible' | 'fading' | 'faded'>('visible')
 
   useEffect(() => {
+    if (window.debugStopChatFade) return
     // Start fading after 5 seconds
     const fadeTimeout = setTimeout(() => {
       setFadeState('fading')
@@ -324,7 +325,7 @@ export default ({
   return (
     <>
       <div
-        className={`chat-wrapper chat-messages-wrapper ${usingTouch ? 'display-mobile' : ''}`} style={{
+        className={`chat-wrapper chat-messages-wrapper ${usingTouch ? 'display-mobile' : ''} ${opened ? 'chat-opened' : ''}`} style={{
           userSelect: opened && allowSelection ? 'text' : undefined,
         }}
       >