From 38c0a915fd2d6fa1ae770f5234cc2b40702226a9 Mon Sep 17 00:00:00 2001
From: BennyKok <itechbenny@gmail.com>
Date: Fri, 12 Jan 2024 17:37:51 +0800
Subject: [PATCH] fix: scroll area

---
 web/src/components/APIKeyList.tsx  | 5 +++--
 web/src/components/MachineList.tsx | 6 ++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/src/components/APIKeyList.tsx b/web/src/components/APIKeyList.tsx
index b44aa46..1d278c9 100644
--- a/web/src/components/APIKeyList.tsx
+++ b/web/src/components/APIKeyList.tsx
@@ -30,6 +30,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Table,
   TableBody,
@@ -245,7 +246,7 @@ export function APIKeyList({ data }: { data: APIKey[] }) {
           </DropdownMenu> */}
         </div>
       </div>
-      <div className="rounded-md border overflow-x-auto w-full">
+      <ScrollArea className="rounded-md border overflow-x-auto w-full">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -294,7 +295,7 @@ export function APIKeyList({ data }: { data: APIKey[] }) {
             )}
           </TableBody>
         </Table>
-      </div>
+      </ScrollArea>
       <div className="flex items-center justify-end space-x-2 py-4">
         <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}
diff --git a/web/src/components/MachineList.tsx b/web/src/components/MachineList.tsx
index 6e56c52..af21e41 100644
--- a/web/src/components/MachineList.tsx
+++ b/web/src/components/MachineList.tsx
@@ -14,6 +14,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import {
   Table,
   TableBody,
@@ -363,7 +364,7 @@ export function MachineList({
           />
         </div>
       </div>
-      <div className="rounded-md border overflow-x-auto w-full">
+      <ScrollArea className="rounded-md  border w-full">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
@@ -412,7 +413,8 @@ export function MachineList({
             )}
           </TableBody>
         </Table>
-      </div>
+      </ScrollArea>
+
       <div className="flex items-center justify-end space-x-2 py-4">
         <div className="flex-1 text-sm text-muted-foreground">
           {table.getFilteredSelectedRowModel().rows.length} of{" "}