Как сделать таблицу shadcn прокручиваемой? ⇐ CSS

[Anonymous]

Я столкнулся с проблемой. На официальном сайте Shadcn таблица прокручивается на маленьких экранах:
Сайт Shadcn
Я добавил таблицу в свой проект, и на маленьком экране у меня нет полосы прокрутки, и все мои изменения макета:
Мой сайт
Мой код:

Код: Выделить всё

import { ScrollArea } from "@/components/ui/scroll-area";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableFooter,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";

const invoices = [
{
invoice: "INV001",
paymentStatus: "Paid",
totalAmount: "$250.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV002",
paymentStatus: "Pending",
totalAmount: "$150.00",
paymentMethod: "PayPal",
},
{
invoice: "INV003",
paymentStatus: "Unpaid",
totalAmount: "$350.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV004",
paymentStatus: "Paid",
totalAmount: "$450.00",
paymentMethod: "Credit Card",
},
{
invoice: "INV005",
paymentStatus: "Paid",
totalAmount: "$550.00",
paymentMethod: "PayPal",
},
{
invoice: "INV006",
paymentStatus: "Pending",
totalAmount: "$200.00",
paymentMethod: "Bank Transfer",
},
{
invoice: "INV007",
paymentStatus: "Unpaid",
totalAmount: "$300.00",
paymentMethod: "Credit Card",
},
];

const HospitalTable: React.FC = () => {
return (




Invoice
Status
Method
Amount



{invoices.map((invoice) => (

{invoice.invoice}
{invoice.paymentStatus}
{invoice.paymentMethod}

{invoice.totalAmount}


))}



Total
$2,500.00




);
};

export default HospitalTable;

Пожалуйста, помогите мне это исправить.
Я хочу, чтобы таблица не меняла макет и реагировала на прокрутку. бар

Подробнее здесь: https://stackoverflow.com/questions/790 ... scrollable