Overflow

import { useEffect, useRef } from 'react';

type Message = { id: string; author: string; text: string };

export function ChatPanel({ messages }: { messages: Message[] }) {
  const listRef = useRef<HTMLOListElement>(null);

  // Start at the newest message.
  useEffect(() => {
    const list = listRef.current;
    if (list) list.scrollTop = list.scrollHeight;
  }, [messages.length]);

  return (
    // overflow-hidden clips the children to the rounded corners.
    <section className='flex w-96 flex-col overflow-hidden rounded-2xl border'>
      {/* A fixed height that scrolls inside, with a scrollbar only when needed;
          overscroll-contain stops the page from scrolling at the ends. */}
      <ol
        ref={listRef}
        className='h-[480px] space-y-3 overflow-y-auto overscroll-contain p-4'
      >
        {messages.map((message) => (
          <li key={message.id} className='text-sm'>
            <span className='font-medium'>{message.author}</span>{' '}
            <span className='text-muted-foreground'>{message.text}</span>
          </li>
        ))}
      </ol>
      <form className='border-t p-3'>
        <input
          aria-label='Message'
          placeholder='Write a message'
          className='w-full rounded-lg border bg-background px-3 py-2 text-sm'
        />
      </form>
    </section>
  );
}