feedback ui justify main window

app.py

@@ -337,6 +337,15 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
                     avatar_images = (None,"data-collection.png"),
                 )
                 
+                # Add feedback elements directly under the chatbot
+                with gr.Column(elem_id="feedback-container"):
+                    with gr.Row(visible=False) as feedback_row:
+                        gr.Markdown("Was this response helpful?")
+                        with gr.Row():
+                            okay_btn = gr.Button("👍 Okay", elem_classes="feedback-button")
+                            not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
+                    feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
+                    feedback_state = gr.State()
 
 
 
@@ -535,14 +544,14 @@ with gr.Blocks(title="Audit Q&A", css= "style.css", theme=theme,elem_id = "main-
                 
 
     #-------------------- New UI elements for Feedback -------------------------
-    with gr.Row(visible=False) as feedback_row:
-        gr.Markdown("Was this response helpful?")
-        with gr.Row():
-            okay_btn = gr.Button("👍 Okay", elem_classes="feedback-button")
-            not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
-    
-    feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
-    feedback_state = gr.State()  # Add state to store logs data
+    # with gr.Row(visible=False) as feedback_row:
+    #     gr.Markdown("Was this response helpful?")
+    #     with gr.Row():
+    #         okay_btn = gr.Button("👍 Okay", elem_classes="feedback-button")
+    #         not_okay_btn = gr.Button("👎 Not to expectations", elem_classes="feedback-button")
+    # 
+    # feedback_thanks = gr.Markdown("Thanks for the feedback!", visible=False)
+    # feedback_state = gr.State()  # Add state to store logs data
 
     def show_feedback(logs):
         """Show feedback buttons and store logs in state"""

style.css

@@ -414,6 +414,8 @@ span.chatbot > p > img{
 	text-decoration: none !important;
 }
 
+/* #_______ Feedback UI _______ */
+
 .feedback-button {
     border: none;
     padding: 8px 16px;
@@ -430,3 +432,13 @@ span.chatbot > p > img{
     position: relative;
     z-index: 10;
 }
+
+#feedback-container {
+    margin: 10px 0;
+    padding: 5px;
+}
+
+.feedback-button {
+    min-width: 100px;
+    margin: 0 5px;
+}