feat(scroll view): added in a scroll view to for quality so it dose not go over the end of the page

frontend/src/lib/tableStuff/TableNoExpand.tsx

@@ -8,6 +8,7 @@ import {
 } from "@tanstack/react-table";
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import {
 	Table,
 	TableBody,
@@ -32,6 +33,7 @@ export default function TableNoExpand({
 		getPaginationRowModel: getPaginationRowModel(),
 		onSortingChange: setSorting,
 		getSortedRowModel: getSortedRowModel(),
+
 		//renderSubComponent: ({ row }: { row: any }) => <ExpandedRow row={row} />,
 		//getRowCanExpand: () => true,
 		state: {
@@ -40,7 +42,7 @@ export default function TableNoExpand({
 	});
 	return (
 		<div className="p-4">
-			<div className="">
+			<ScrollArea className="w-11/12 rounded-md border whitespace-nowrap">
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -106,7 +108,8 @@ export default function TableNoExpand({
 						Next
 					</Button>
 				</div>
-			</div>
+				<ScrollBar orientation="horizontal" />
+			</ScrollArea>
 		</div>
 	);
 }