style.css

/* Main container styling */
.gradio-container {
    height: auto;
    overflow: hidden;  /* Prevents overflow outside the main container */
  }
  
  /* Main row configuration to fit within the screen */
  #main-row {
    display: flex; /* Ensures that columns within this row are aligned horizontally */
    overflow: hidden; /* Prevents overflow outside the main row */
  }
  
  /* Configuration for the column containing the chatbot to ensure it doesn't grow too long */
  .gr-column {
    height: 100%; /* Sets column height to fill the parent container */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures no overflow outside the column */
  }
  
  /* Chatbot specific styling */
  #chatbot {
    flex-grow: 1; /* Allows chatbot to expand within the column space */
    overflow-y: auto; /* Allows vertical scrolling within the chatbot */
  }
  
  /* General improvements for component layout and aesthetics */
  .gr-row > .wrap > div, .gr-column > .wrap {
    margin-bottom: 10px;
  }
  
  .gr-column {
    gap: 10px;
    align-items: flex-start; /* Aligns items to the start, preventing stretch */
  }