From b05184a6541b07e8f478f6e3c3a62c02ea3781fb Mon Sep 17 00:00:00 2001
From: Henry Dollman <hank@henrygd.me>
Date: Sun, 4 Aug 2024 13:58:18 -0400
Subject: [PATCH] mobile style tweaks

---
 hub/site/src/components/routes/home.tsx   | 36 +++++++++++------------
 hub/site/src/components/routes/system.tsx | 13 ++++----
 hub/site/src/main.tsx                     |  2 +-
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/hub/site/src/components/routes/home.tsx b/hub/site/src/components/routes/home.tsx
index 7787447..8516e72 100644
--- a/hub/site/src/components/routes/home.tsx
+++ b/hub/site/src/components/routes/home.tsx
@@ -9,24 +9,22 @@ export default function () {
 	}, [])
 
 	return (
-		<>
-			<Card>
-				<CardHeader className="pb-5">
-					<CardTitle className={'mb-1.5'}>All Systems</CardTitle>
-					<CardDescription>
-						Updated in real time. Press{' '}
-						<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-							<span className="text-xs">⌘</span>K
-						</kbd>{' '}
-						to open the command palette.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Suspense>
-						<SystemsTable />
-					</Suspense>
-				</CardContent>
-			</Card>
-		</>
+		<Card>
+			<CardHeader className="pb-2 md:pb-5 px-4 sm:px-7 max-sm:pt-5">
+				<CardTitle className="mb-1.5">All Systems</CardTitle>
+				<CardDescription>
+					Updated in real time. Press{' '}
+					<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+						<span className="text-xs">⌘</span>K
+					</kbd>{' '}
+					to open the command palette.
+				</CardDescription>
+			</CardHeader>
+			<CardContent className="max-sm:p-2">
+				<Suspense>
+					<SystemsTable />
+				</Suspense>
+			</CardContent>
+		</Card>
 	)
 }
diff --git a/hub/site/src/components/routes/system.tsx b/hub/site/src/components/routes/system.tsx
index ff84cec..d5a84dc 100644
--- a/hub/site/src/components/routes/system.tsx
+++ b/hub/site/src/components/routes/system.tsx
@@ -147,9 +147,7 @@ export default function ServerDetail({ name }: { name: string }) {
 			dockerMemData.push(memData)
 			dockerNetData.push(netData)
 		}
-		console.log('dockerCpuData', dockerCpuData)
 		// console.log('dockerMemData', dockerMemData)
-		console.log('dockerNetData', dockerNetData)
 		setDockerCpuChartData(dockerCpuData)
 		setDockerMemChartData(dockerMemData)
 		setDockerNetChartData(dockerNetData)
@@ -170,7 +168,7 @@ export default function ServerDetail({ name }: { name: string }) {
 	return (
 		<div className="grid gap-4 mb-10">
 			<Card>
-				<div className="grid gap-2 px-6 pt-4 pb-5">
+				<div className="grid gap-2 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
 					<h1 className="text-[1.6rem] font-semibold">{server.name}</h1>
 					<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
 						<div className="capitalize flex gap-2 items-center">
@@ -219,6 +217,7 @@ export default function ServerDetail({ name }: { name: string }) {
 							</>
 						)}
 					</div>
+					<ChartTimeSelect className="mt-2 -ml-1 sm:hidden" />
 				</div>
 			</Card>
 
@@ -279,15 +278,15 @@ function ChartCard({
 	children: React.ReactNode
 }) {
 	return (
-		<Card className="pb-4 col-span-full">
-			<CardHeader className="pb-5 pt-4 relative space-y-1">
+		<Card className="pb-2 sm:pb-4 col-span-full">
+			<CardHeader className="pb-5 pt-4 relative space-y-1 max-sm:py-3 max-sm:px-4">
 				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				<div className="w-full pt-1 sm:w-40 sm:absolute top-1.5 right-3.5">
+				<div className="w-full pt-1 sm:w-40 hidden sm:block absolute top-1.5 right-3.5">
 					<ChartTimeSelect />
 				</div>
 			</CardHeader>
-			<CardContent className={'pl-1 w-[calc(100%-1.6em)] h-52 relative'}>
+			<CardContent className="pl-1 w-[calc(100%-1.6em)] h-52 relative">
 				<Suspense fallback={<Spinner />}>{children}</Suspense>
 			</CardContent>
 		</Card>
diff --git a/hub/site/src/main.tsx b/hub/site/src/main.tsx
index 035a036..024753c 100644
--- a/hub/site/src/main.tsx
+++ b/hub/site/src/main.tsx
@@ -122,7 +122,7 @@ const Layout = () => {
 	return (
 		<>
 			<div className="container">
-				<div className="flex items-center h-16 bg-card px-6 border bt-0 rounded-md my-4">
+				<div className="flex items-center h-14 md:h-16 bg-card px-6 border bt-0 rounded-md my-4">
 					<Link
 						href="/"
 						aria-label="Home"