hub(ui): style cleanup and mobile improvements

internal/site/src/components/charts/hooks.ts

@@ -99,9 +99,9 @@ export function useYAxisWidth() {
 			clearTimeout(timeout)
 			timeout = setTimeout(() => {
 				document.body.appendChild(div)
-				const width = div.offsetWidth + 24
+				const width = div.offsetWidth + 20 
 				if (width > yAxisWidth) {
-					setYAxisWidth(div.offsetWidth + 24)
+					setYAxisWidth(width)
 				}
 				document.body.removeChild(div)
 			})

internal/site/src/components/containers-table/containers-table.tsx

@@ -163,9 +163,9 @@ export default function ContainersTable({ systemId }: { systemId?: string }) {
 	const visibleColumns = table.getVisibleLeafColumns()
 
 	return (
-		<Card className="p-6 @container w-full">
-			<CardHeader className="p-0 mb-4">
-				<div className="grid md:flex gap-5 w-full items-end">
+		<Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
+			<CardHeader className="p-0 mb-3 sm:mb-4">
+				<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
 					<div className="px-2 sm:px-1">
 						<CardTitle className="mb-2">
 							<Trans>All Containers</Trans>

internal/site/src/components/navbar.tsx

@@ -95,7 +95,10 @@ export default function Navbar() {
 						<DropdownMenuLabel className="max-w-40 truncate">{pb.authStore.record?.email}</DropdownMenuLabel>
 						<DropdownMenuSeparator />
 						<DropdownMenuGroup>
-							<DropdownMenuItem onClick={() => navigate(getPagePath($router, "home"))} className="flex items-center">
+							<DropdownMenuItem
+								onClick={() => navigate(getPagePath($router, "containers"))}
+								className="flex items-center"
+							>
 								<ContainerIcon className="h-4 w-4 me-2.5" strokeWidth={1.5} />
 								<Trans>All Containers</Trans>
 							</DropdownMenuItem>

internal/site/src/components/routes/system/chart-card.tsx

@@ -107,15 +107,19 @@ export function ChartCard({
 
 	return (
 		<Card
-			className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full min-h-full", { "col-span-full": !grid }, className)}
+			className={cn(
+				"px-3 py-5 sm:py-6 sm:px-6 odd:last-of-type:col-span-full min-h-full",
+				{ "col-span-full": !grid },
+				className
+			)}
 			ref={ref}
 		>
-			<CardHeader className="pb-5 pt-4 gap-1 relative max-sm:py-3 max-sm:px-4">
-				<CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
+			<CardHeader className="gap-1.5 relative p-0 mb-3 sm:mb-4">
+				<CardTitle>{title}</CardTitle>
 				<CardDescription>{description}</CardDescription>
-				{cornerEl && <div className="py-1 grid sm:justify-end sm:absolute sm:top-3.5 sm:end-3.5">{cornerEl}</div>}
+				{cornerEl && <div className="grid sm:justify-end sm:absolute sm:top-0 sm:end-0 my-1 sm:my-0">{cornerEl}</div>}
 			</CardHeader>
-			<div className={cn("ps-0 w-[calc(100%-1.3em)] relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}>
+			<div className={cn("ps-0 -me-1 -ms-3.5 relative group", legend ? "h-54 md:h-56" : "h-48 md:h-52")}>
 				{
 					<Spinner
 						msg={empty ? t`Waiting for enough records to display` : undefined}

internal/site/src/components/routes/system/cpu-sheet.tsx

@@ -111,7 +111,7 @@ export default memo(function CpuCoresSheet({
 					title={t`View more`}
 					variant="outline"
 					size="icon"
-					className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
+					className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
 				>
 					<MoreHorizontalIcon />
 				</Button>

internal/site/src/components/routes/system/info-bar.tsx

@@ -135,10 +135,10 @@ export default function InfoBar({
 
 	return (
 		<Card>
-			<div className="grid xl:flex gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
-				<div>
-					<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
-					<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
+			<div className="grid xl:flex xl:gap-4 px-4 sm:px-6 pt-3 sm:pt-4 pb-5">
+				<div className="min-w-0">
+					<h1 className="text-2xl sm:text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
+					<div className="flex xl:flex-wrap items-center py-4 xl:p-0 -mt-3 xl:mt-1 gap-3 text-sm text-nowrap opacity-90 overflow-x-auto scrollbar-hide -mx-4 px-4 xl:mx-0">
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div className="capitalize flex gap-2 items-center">

internal/site/src/components/routes/system/network-sheet.tsx

@@ -46,7 +46,7 @@ export default memo(function NetworkSheet({
 					title={t`View more`}
 					variant="outline"
 					size="icon"
-					className="shrink-0 max-sm:absolute max-sm:top-3 max-sm:end-3"
+					className="shrink-0 max-sm:absolute max-sm:top-0 max-sm:end-0"
 				>
 					<MoreHorizontalIcon />
 				</Button>

internal/site/src/components/routes/system/smart-table.tsx

@@ -532,9 +532,9 @@ export default function DisksTable({ systemId }: { systemId?: string }) {
 
 	return (
 		<div>
-			<Card className="p-6 @container w-full">
-				<CardHeader className="p-0 mb-4">
-					<div className="grid md:flex gap-5 w-full items-end">
+			<Card className="@container w-full px-3 py-5 sm:py-6 sm:px-6">
+				<CardHeader className="p-0 mb-3 sm:mb-4">
+					<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
 						<div className="px-2 sm:px-1">
 							<CardTitle className="mb-2">S.M.A.R.T.</CardTitle>
 							<CardDescription className="flex">

internal/site/src/components/systems-table/systems-table.tsx

@@ -134,8 +134,8 @@ export default function SystemsTable() {
 
 	const CardHead = useMemo(() => {
 		return (
-			<CardHeader className="pb-4.5 px-2 sm:px-6 max-sm:pt-5 max-sm:pb-1">
-				<div className="grid md:flex gap-5 w-full items-end">
+			<CardHeader className="p-0 mb-3 sm:mb-4">
+				<div className="grid md:flex gap-x-5 gap-y-3 w-full items-end">
 					<div className="px-2 sm:px-1">
 						<CardTitle className="mb-2">
 							<Trans>All Systems</Trans>
@@ -302,29 +302,27 @@ export default function SystemsTable() {
 	])
 
 	return (
-		<Card>
+		<Card className="w-full px-3 py-5 sm:py-6 sm:px-6">
 			{CardHead}
-			<div className="p-6 pt-0 max-sm:py-3 max-sm:px-2">
-				{viewMode === "table" ? (
-					// table layout
-					<div className="rounded-md">
-						<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
-					</div>
-				) : (
-					// grid layout
-					<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-						{rows?.length ? (
-							rows.map((row) => {
-								return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
-							})
-						) : (
-							<div className="col-span-full text-center py-8">
-								<Trans>No systems found.</Trans>
-							</div>
-						)}
-					</div>
-				)}
-			</div>
+			{viewMode === "table" ? (
+				// table layout
+				<div className="rounded-md">
+					<AllSystemsTable table={table} rows={rows} colLength={visibleColumns.length} />
+				</div>
+			) : (
+				// grid layout
+				<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+					{rows?.length ? (
+						rows.map((row) => {
+							return <SystemCard key={row.original.id} row={row} table={table} colLength={visibleColumns.length} />
+						})
+					) : (
+						<div className="col-span-full text-center py-8">
+							<Trans>No systems found.</Trans>
+						</div>
+					)}
+				</div>
+			)}
 		</Card>
 	)
 }

internal/site/src/components/ui/card.tsx

@@ -18,7 +18,11 @@ CardHeader.displayName = "CardHeader"
 
 const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
 	({ className, ...props }, ref) => (
-		<h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+		<h3
+			ref={ref}
+			className={cn("text-[1.4em] sm:text-2xl font-semibold leading-none tracking-tight", className)}
+			{...props}
+		/>
 	)
 )
 CardTitle.displayName = "CardTitle"

internal/site/src/components/ui/dropdown-menu.tsx

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			"flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
+			"flex select-none items-center rounded-sm px-2.5 py-1.5 text-[.95em] outline-hidden focus:bg-accent/70 data-[state=open]:bg-accent/70",
 			inset && "ps-8",
 			className
 		)}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			"cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			"cursor-pointer relative flex select-none items-center rounded-sm px-2.5 py-1.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "ps-8",
 			className
 		)}
@@ -95,7 +95,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		checked={checked}
@@ -118,7 +118,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-sm outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+			"relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2.5 text-[.95em] outline-hidden focus:bg-accent/70 focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className
 		)}
 		{...props}
@@ -141,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
 	<DropdownMenuPrimitive.Label
 		ref={ref}
-		className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
+		className={cn("px-2.5 py-1.5 text-[.95em] font-semibold", inset && "ps-8", className)}
 		{...props}
 	/>
 ))

internal/site/src/index.css

@@ -169,6 +169,14 @@
 	min-width: 30.3rem;
 }
 
+@utility scrollbar-hide {
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
+}
+
 .recharts-tooltip-wrapper {
 	z-index: 51;
 	@apply tabular-nums;