a chat with gradio (how to modify its screen appearance)

Question

I wrote this very simple script

import requests
import gradio as gr
import json

def chat_response(message, history, response_limit):
    return f"You wrote: {message} and asked {response_limit}"

with gr.Blocks() as demo:
    gr.Markdown("# Data Query!")
    with gr.Row():
        with gr.Column(scale=3):
            response_limit = gr.Number(label="Response Limit", value=10, interactive=True)
        with gr.Column(scale=7):
            chat = gr.ChatInterface(fn=chat_response,additional_inputs=[response_limit])

demo.launch()

with this I got something like

Do you notice the huge blank space below the chat (in red) and how small the window for the chat is?

I would like the chat space to extend all the way to the bottom (or if I put something else below, for all the elements in the column to ocuppy the whole screen (like the blue rectangle)

How can I do this?

EDIT: I modified the code to

import requests
import gradio as gr
import json

def chat_response(message, history, response_limit):
    return f"You wrote: {message} and asked {response_limit}"

css = """
#chatbot {
    flex-grow: 1 !important;
    overflow: auto !important;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# Data Query!")
    with gr.Row():
        with gr.Column(scale=3):
            response_limit = gr.Number(label="Response Limit", value=10, interactive=True)
        with gr.Column(scale=7):
            chat = gr.ChatInterface(
                fn=chat_response,
                chatbot=gr.Chatbot(elem_id="chatbot",
                                    render=False),
                additional_inputs=[response_limit]
            )
demo.launch()

and now the chatbox is a little larger but it does no go all the way to the bottom. How can I do this?

(Memo) In the beginning I did not add render=False and I got

    raise DuplicateBlockError(
gradio.exceptions.DuplicateBlockError: A block with id: 7 has already been rendered in the current Blocks.

Thanks to this post I could correct that, if anybody is having the same problem

Answer 1

I finally achieved what I was looking for modifying the code as

import requests
import gradio as gr
import json

def chat_response(message, history, response_limit):
    return f"You wrote: {message} and asked {response_limit}"

css = """
#chatbot {
    flex-grow: 1 !important;
    overflow: auto !important;
}
#col { height: calc(100vh - 112px - 16px) !important; }
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# Data Query!")
    with gr.Row():
        with gr.Column(scale=3):
            response_limit = gr.Number(label="Response Limit", value=10, interactive=True)
        with gr.Column(scale=7,elem_id="col"):
            chat = gr.ChatInterface(
                fn=chat_response,
                chatbot=gr.Chatbot(elem_id="chatbot",
                                   render=False),
                additional_inputs=[response_limit]
            )

demo.queue()
demo.launch()