From daa140447ed673d675e22e0f180f23b22fe9cc0f Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Sun, 18 Feb 2024 09:22:16 -0800
Subject: [PATCH] Move chat UI elements to the right on desktop

---
 css/main.css       |  9 +++++++++
 modules/ui_chat.py | 14 +++++++++-----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6c658546..b4ec0589 100644
--- a/css/main.css
+++ b/css/main.css
@@ -689,6 +689,15 @@ div.svelte-362y77>*, div.svelte-362y77>.form>* {
         max-width: 300px;
         margin-left: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
     }
+
+    #chat-controls {
+        position: absolute;
+        top: 16px;
+        right: 0;
+        width: calc(0.5*(var(--document-width) - 880px - 120px - 16px*2));
+        max-width: 300px;
+        margin-right: calc(-0.5*(var(--document-width) - 880px - 14px - 16px * 2));
+    }
 }
 
 /* ----------------------------------------------
diff --git a/modules/ui_chat.py b/modules/ui_chat.py
index 7576628d..f74ad282 100644
--- a/modules/ui_chat.py
+++ b/modules/ui_chat.py
@@ -77,12 +77,16 @@ def create_ui():
                     shared.gradio['rename_to-confirm'] = gr.Button('Confirm', visible=False, elem_classes='refresh-button')
                     shared.gradio['rename_to-cancel'] = gr.Button('Cancel', visible=False, elem_classes='refresh-button')
 
-        with gr.Row():
-            shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'])
+        with gr.Row(elem_id='chat-controls', elem_classes=['pretty_scrollbar']):
+            with gr.Column():
+                with gr.Row():
+                    shared.gradio['start_with'] = gr.Textbox(label='Start reply with', placeholder='Sure thing!', value=shared.settings['start_with'], elem_classes=['pretty_scrollbar'])
 
-        with gr.Row():
-            shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value='chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.', elem_id='chat-mode')
-            shared.gradio['chat_style'] = gr.Dropdown(choices=utils.get_available_chat_styles(), label='Chat style', value=shared.settings['chat_style'], visible=shared.settings['mode'] != 'instruct')
+                with gr.Row():
+                    shared.gradio['mode'] = gr.Radio(choices=['chat', 'chat-instruct', 'instruct'], value='chat', label='Mode', info='Defines how the chat prompt is generated. In instruct and chat-instruct modes, the instruction template selected under Parameters > Instruction template must match the current model.', elem_id='chat-mode')
+
+                with gr.Row():
+                    shared.gradio['chat_style'] = gr.Dropdown(choices=utils.get_available_chat_styles(), label='Chat style', value=shared.settings['chat_style'], visible=shared.settings['mode'] != 'instruct')
 
 
 def create_chat_settings_ui():