refactor(quality): added some new options plus cancel button

frontend/src/lib/tableStuff/TableNoExpand.tsx

@@ -42,8 +42,8 @@ export default function TableNoExpand({
 	});
 	return (
 		<div className="p-4">
-			<ScrollArea className="w-11/12 rounded-md border whitespace-nowrap">
-				<Table>
+			<Table className="table-fixed w-full">
+				<ScrollArea className="w-full rounded-md border whitespace-nowrap">
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
 							<TableRow key={headerGroup.id}>
@@ -89,27 +89,28 @@ export default function TableNoExpand({
 							</React.Fragment>
 						))}
 					</TableBody>
-				</Table>
-				<div className="flex items-center justify-end space-x-2 py-4">
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => table.previousPage()}
-						disabled={!table.getCanPreviousPage()}
-					>
-						Previous
-					</Button>
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => table.nextPage()}
-						disabled={!table.getCanNextPage()}
-					>
-						Next
-					</Button>
-				</div>
-				<ScrollBar orientation="horizontal" />
-			</ScrollArea>
+					<ScrollBar orientation="horizontal" />
+				</ScrollArea>
+			</Table>
+
+			<div className="flex items-center justify-end space-x-2 py-4">
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.previousPage()}
+					disabled={!table.getCanPreviousPage()}
+				>
+					Previous
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					onClick={() => table.nextPage()}
+					disabled={!table.getCanNextPage()}
+				>
+					Next
+				</Button>
+			</div>
 		</div>
 	);
 }