streaming-react-app/src/StreamingInterface.css

/*.app-wrapper-sra {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}*/

.app-wrapper-sra {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Align to top for scrolling */
  align-items: center;
  height: 100vh; /* Ensure it takes the full viewport height */
  overflow-y: auto; /* Enable scrolling if content exceeds height */
}

.main-container-sra {
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  margin: 16px;
  margin-bottom: 36px;
  border-radius: 8px;
  box-shadow: 0px 24px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 0, 0, 0.05);
  /* overflow: hidden; */
  overflow-y: auto; /* Ensure vertical scrollability */
  max-height: 100vh; /* Constrain to viewport height */
}

.top-section-sra {
  padding-top: 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.horizontal-padding-sra {
  padding-left: 20px;
  padding-right: 20px;
}

.header-container-sra {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
}

.header-icon-sra {
  display: block;
  margin-right: 12px;
}

.translation-text-container-sra {
  background-color: #f8f8f8;
  padding-top: 12px;
  padding-bottom: 4px;
}

.text-chunk-sra {
  margin-bottom: 12px;
}

body, html {
  height: 100%;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
  height: 100%;
  overflow-y: auto; /* Enable vertical scroll */
}