Look at adding mobile cards

src/app/_components/docker-table.tsx

@@ -51,23 +51,92 @@ function DockerRow({
 	);
 }
 
+function DockerCard({
+	containerInfo,
+}: {
+	containerInfo: dockerRouterType["list"][number];
+}) {
+	const { data: latest, isError, isLoading } = api.docker.latest.useQuery({ id: containerInfo.container.id }, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
+	const outdated = containerInfo.image.current.hash !== latest?.latest.hash;
+
+	let latestFragment: JSX.Element | null = null;
+	if (isError) {
+		latestFragment = (
+			<>
+				<td>{"Error"}</td>
+				<td>{"Error"}</td>
+			</>
+		);
+	} else if (isLoading) {
+		latestFragment = (
+			<>
+				<td>
+					<span className="loading loading-dots loading-lg" />
+				</td>
+				<td>
+					<span className="loading loading-dots loading-lg" />
+				</td>
+			</>
+		);
+	} else if (latest) {
+		latestFragment = (
+			<>
+				<td>{latest?.latest.tag}</td>
+				<td>{latest?.latest.hash}</td>
+			</>
+		);
+	}
+
+	return (
+    <div key={containerInfo.container.name} className="card card-border w-96 bg-base-100">
+      <div className="card-body">
+        <h2 className="card-title">{containerInfo.container.name}</h2>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-title">Image</div>
+            <div className="stat-value">{containerInfo.image.name}</div>
+          </div>
+        </div>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-title">Tag</div>
+            <div className="stat-value">{containerInfo.image.name}</div>
+          </div>
+        </div>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-title">Short Hash</div>
+            <div className="stat-value">{containerInfo.image.name}</div>
+          </div>
+        </div>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-title">Tag</div>
+            <div className="stat-value">{containerInfo.image.name}</div>
+          </div>
+        </div>
+        <div className="stats shadow">
+          <div className="stat">
+            <div className="stat-title">Short Hash</div>
+            <div className="stat-value">{containerInfo.image.name}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+	);
+}
+
+
 export function DockerTable() {
 	const { data: list, isLoading: listLoading } = api.docker.list.useQuery(undefined, { refetchOnMount: false, refetchOnWindowFocus: false, refetchOnReconnect: false });
+
 	return (
-		<div className="overflow-x-auto rounded-md border border-base-content/15 bg-base-100">
+		<>
-			{!listLoading ? (
+			{listLoading ? (
-				<table className="table-s table">
+				<>Loading data...</>
-					<thead>
+			) : (
-						<tr>
+				<>
-							<th>Name</th>
+					<div className="flex flex-row flex-wrap">
-							<th>Image</th>
-							<th>Tag</th>
-							<th>Short Hash</th>
-							<th>Tag</th>
-							<th>Short Hash</th>
-						</tr>
-					</thead>
-					<tbody>
 						{list
 							? list
 									.sort((ca, cb) => {
@@ -81,13 +150,44 @@ export function DockerTable() {
 										}
 										return 0;
 									})
-									.map((containerInfo) => <DockerRow key={containerInfo.container.name} containerInfo={containerInfo} />)
+									.map((containerInfo) => (
+										
+									))
 							: null}
-					</tbody>
+					</div>
-				</table>
+					{/* <div className={"overflow-x-auto rounded-md border border-base-content/15 bg-base-100"}>
-			) : (
+						<table className="table-s table-pin-rows table border-separate border-spacing-0">
-				<>Loading data...</>
+							<thead>
+								<tr className="border-l-8 border-l-base-200">
+									<th>Name</th>
+									<th>Image</th>
+									<th>Tag</th>
+									<th>Short Hash</th>
+									<th>Tag</th>
+									<th>Short Hash</th>
+								</tr>
+							</thead>
+							<tbody>
+								{list
+									? list
+											.sort((ca, cb) => {
+												if (ca.container.name && cb.container.name) {
+													if (ca.container.name < cb.container.name) {
+														return -1;
+													}
+													if (ca.container.name > cb.container.name) {
+														return 1;
+													}
+												}
+												return 0;
+											})
+											.map((containerInfo) => <DockerRow key={containerInfo.container.name} containerInfo={containerInfo} />)
+									: null}
+							</tbody>
+						</table>
+					</div> */}
+				</>
 			)}
-		</div>
+		</>
 	);
 }

src/app/page.tsx

@@ -6,7 +6,7 @@ export default async function Home() {
 
 	return (
 		<main className="flex min-h-screen flex-col items-center justify-center">
-			<div className="container flex flex-col items-center justify-center gap-12 px-4 py-16">
+			<div className="container flex max-h-screen flex-col items-center justify-center px-4 py-8">
 				<DockerTable />
 			</div>
 		</main>