From 2d09a344ba5117f93070149a30478f8936b7cdcf Mon Sep 17 00:00:00 2001
From: simoleo89 <11816867+simoleo89@users.noreply.github.com>
Date: Mon, 15 Jun 2026 22:35:36 +0200
Subject: [PATCH] fix(chat): keep flood warning inside the chat bar

The flood/mute warning was rendered inside the inline-grid input-sizer with no
single-line constraint, so a long message (e.g. a large remaining time) wrapped
to a second line and, with the bar's overflow-visible, spilled out the top. Give
it its own centered, single-line, truncating container so it stays within the
bar regardless of length.
---
 .../room/widgets/chat-input/ChatInputView.tsx      | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 9bf2759..475060e 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -332,12 +332,14 @@ export const ChatInputView: FC<{}> = props =>
                         onHover={ mention.setSelectedIndex }
                     /> }
                 <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-                <div className="flex-1 items-center input-sizer">
-                    { !floodBlocked &&
-                        <input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
-                    { floodBlocked &&
-                        <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
-                </div>
+                { !floodBlocked &&
+                    <div className="flex-1 items-center input-sizer">
+                        <input ref={ inputRef } className="w-full border-none bg-transparent px-[10px] text-[0.86rem] text-black placeholder:text-[#6c757d] focus:border-current focus:shadow-none focus:ring-0" maxLength={ maxChatLength } placeholder={ LocalizeText('widgets.chatinput.default') } type="text" value={ chatValue } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } />
+                    </div> }
+                { floodBlocked &&
+                    <div className="flex min-w-0 flex-1 items-center px-[10px]">
+                        <Text variant="danger" className="w-full truncate whitespace-nowrap text-[0.8rem] font-bold leading-none">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) }</Text>
+                    </div> }
                 <ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } />
             </div>, document.getElementById('toolbar-chat-input-container'))
     );