david167 commited on
Commit
c106c31
·
1 Parent(s): f364fe3

Fix layout jumping when focusing input field

Browse files
Files changed (1) hide show
  1. gradio_app.py +13 -1
gradio_app.py CHANGED
@@ -214,10 +214,22 @@ css = """
214
  padding: 20px !important;
215
  }
216
  #chatbot {
217
- height: 70vh !important;
 
218
  min-height: 600px !important;
219
  overflow-y: auto !important;
 
220
  }
 
 
 
 
 
 
 
 
 
 
221
  """
222
 
223
  with gr.Blocks(css=css, title="Llama Chat", theme=gr.themes.Soft()) as demo:
 
214
  padding: 20px !important;
215
  }
216
  #chatbot {
217
+ height: 600px !important;
218
+ max-height: 600px !important;
219
  min-height: 600px !important;
220
  overflow-y: auto !important;
221
+ flex-shrink: 0 !important;
222
  }
223
+ /* Prevent layout shifts on input focus */
224
+ .gr-textbox input:focus {
225
+ outline: 2px solid #007bff !important;
226
+ outline-offset: -2px !important;
227
+ }
228
+ .gr-row {
229
+ flex-shrink: 0 !important;
230
+ }
231
+ .gr-column {
232
+ flex-shrink: 0 !important;}
233
  """
234
 
235
  with gr.Blocks(css=css, title="Llama Chat", theme=gr.themes.Soft()) as demo: