refactor(cards): trying to make the cards fit the odd shaped screens better

frontend/src/routes/_old/old/-components/logistics/warehouse/PPOOCard.tsx

@@ -1,9 +1,10 @@
 //import { LstCard } from "@/components/extendedUI/LstCard";
 
 import { useQuery } from "@tanstack/react-query";
+import { LstCard } from "@/components/ui/lstCard";
+import TableNoExpand from "@/lib/tableStuff/TableNoExpand";
 import { getPPOO } from "../../../-utils/querys/logistics/getPPOO";
 import { columns } from "../../../-utils/tableData/ppoo/ppooColumns";
-import { PPOOTable } from "../../../-utils/tableData/ppoo/ppooData";
 //import { CircleX } from "lucide-react";
 //import { Suspense } from "react";
 //import { toast } from "sonner";
@@ -12,7 +13,7 @@ export default function PPOO() {
 	//{ style = {} }
 	const { data, isError, isLoading } = useQuery(getPPOO());
 
-	if (isLoading) return <div>Loading adjustmnet data...</div>;
+	if (isLoading) return <div>Loading adjustments data...</div>;
 	if (isError) {
 		return (
 			<div>
@@ -28,11 +29,15 @@ export default function PPOO() {
 	// };
 
 	return (
-		<PPOOTable
+		<>
-			columns={columns}
+			<LstCard className="">
-			data={data}
+				<TableNoExpand
-			//style={style}
+					columns={columns}
-		/>
+					data={data}
+					//style={style}
+				/>
+			</LstCard>
+		</>
 	);
 	// return (
 	//     <div style={style}>

frontend/src/routes/_old/old/quality/-components/WarehouseCard.tsx

@@ -46,6 +46,7 @@ export default function PPOO() {
 					<Button
 						variant="ghost"
 						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+						className="w-16 ml-1"
 					>
 						<span className="flex flex-row gap-2">Article</span>
 						{column.getIsSorted() === "asc" ? (
@@ -63,6 +64,7 @@ export default function PPOO() {
 					<Button
 						variant="ghost"
 						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+						className="w-16 ml-1"
 					>
 						<span className="flex flex-row gap-2">Running Number</span>
 						{column.getIsSorted() === "asc" ? (
@@ -80,6 +82,7 @@ export default function PPOO() {
 					<Button
 						variant="ghost"
 						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+						className="w-16 ml-1"
 					>
 						<span className="flex flex-row gap-2">Location</span>
 						{column.getIsSorted() === "asc" ? (
@@ -97,8 +100,9 @@ export default function PPOO() {
 					<Button
 						variant="ghost"
 						onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+						className="w-16 ml-1"
 					>
-						<span className="flex flex-row gap-2">Drop off at</span>
+						<span className="flex flex-row gap-1">Drop off at</span>
 						{column.getIsSorted() === "asc" ? (
 							<ArrowUp className="ml-2 h-4 w-4" />
 						) : (
@@ -111,7 +115,7 @@ export default function PPOO() {
 	];
 
 	return (
-		<LstCard className="w-fit">
+		<LstCard className="w-5/6">
 			<CardHeader>
 				Quality Request Card Total Pallets {filteredData.length}
 			</CardHeader>