Update

app.py

@@ -53,14 +53,6 @@ span.md.svelte-8tpqd2.chatbot.prose p {
 .gradio-container {
     background: #1c1c1c; /* Dark background */
     color: white; /* Light text color */
-    height: 100vh; /* Full viewport height */
-    display: flex;
-    flex-direction: column;
-}
-/* Chatbot messages container */
-.svelte-1s78gfg {
-    flex-grow: 1; /* Allow it to grow and take available space */
-    overflow-y: auto; /* Enable vertical scrolling */
 }
 /* RED (Hex: #DB1616) for action buttons and links only */
 .clear-btn {
@@ -89,16 +81,17 @@ span.md.svelte-8tpqd2.chatbot.prose p {
     content: url('file=Komal-patra/EU_AI_ACT/orcawise image.png');
     margin-right: 8px;
 }
+/* Enable scrolling for the chatbot messages */
+.chatbot .messages {
+    max-height: 500px;  /* Adjust as needed */
+    overflow-y: auto;
+}
 """
 
 # Gradio interface setup
 with gr.Blocks(css=custom_css) as demo:
     with gr.Row():
-        with gr.Column(scale=1):
-            gr.Markdown("<h2>My chats</h2>")
-            chat_topics = gr.Markdown("<!-- Dynamic content -->")
-
-        with gr.Column(scale=3):
+        with gr.Column(scale=3, offset=1):  # Adjust column to take full width minus some padding
             gr.Markdown("<h1>Ask a question about the EU AI Act</h1>")
             chatbot = gr.Chatbot()
             msg = gr.Textbox(placeholder="Ask your question...", show_label=False)  # Add placeholder text
@@ -129,4 +122,4 @@ with gr.Blocks(css=custom_css) as demo:
             )
             clear.click(lambda: None, None, chatbot, queue=False)
 
-demo.launch(share=True)
+demo.launch()