I think you need to do if height is more than 300px you need to add scroll.

you ca use below snippet for chat class for that.

.chat {
  max-height: 300px;
  overflow: auto;
  background-color: rgb(var(--v-theme-surface));
  grid-column: span 3 / span 3;
  grid-row: span 3 / span 3;
  border-radius: 20px;
}

in above snippet i just add overflow as auto and change a min-height to max-height.

min-height = It's used to set a fixed minimum height, but there is no limit for the maximum height. However, it is not working in this case.

max-height = It's used to set a maximum height. If the content exceeds the specified height, a scrollbar is automatically added.

If I'm wrong please let me know I'll help you