From 11167cb9b3d5e63b990d4462a8c7c82a107ddcb5 Mon Sep 17 00:00:00 2001
From: simoleo89 <simoleo89@gmail.com>
Date: Sun, 14 Jun 2026 21:01:46 +0200
Subject: [PATCH] feat(chat-input): move chat-style selector to the left of the
 input

Match the reference layout: the chat-style picker now sits before the text
field (left side) instead of after it. Adds left padding + a small gap so the
trigger, input and emoji selector are evenly spaced.
---
 src/components/room/widgets/chat-input/ChatInputView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 1edcfe5..5ab1334 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -313,7 +313,7 @@ export const ChatInputView: FC<{}> = props =>
 
     return (
         createPortal(
-            <div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between overflow-visible rounded-[12px] border-2 border-black bg-white pr-[8px]">
+            <div className="nitro-chat-input-container relative flex h-[38px] w-full items-center justify-between gap-[6px] overflow-visible rounded-[12px] border-2 border-black bg-white pl-[8px] pr-[8px]">
                 { commandSelectorVisible &&
                     <ChatInputCommandSelectorView
                         commands={ filteredCommands }
@@ -331,6 +331,7 @@ export const ChatInputView: FC<{}> = props =>
                         onSelect={ mention.apply }
                         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() } /> }
@@ -338,7 +339,6 @@ export const ChatInputView: FC<{}> = props =>
                         <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
                 <ChatInputEmojiSelectorView addChatEmoji={ addChatEmoji } />
-                <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
             </div>, document.getElementById('toolbar-chat-input-container'))
     );
 };