ui: redesign tabs

apps/client/app/routes/details.tsx

@@ -111,7 +111,6 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 				</div>
 				<div className="flex gap-4">
 					<Button
-						variant="secondary"
 						onClick={() => mountVol.mutate({ path: { name } })}
 						loading={mountVol.isPending}
 						className={cn({ hidden: volume.status === "mounted" })}
@@ -131,8 +130,8 @@ export default function DetailsPage({ loaderData }: Route.ComponentProps) {
 					</Button>
 				</div>
 			</div>
-			<Tabs defaultValue="info" className="mt-0">
-				<TabsList>
+			<Tabs defaultValue="info" className="mt-4">
+				<TabsList className="mb-2">
 					<TabsTrigger value="info">Configuration</TabsTrigger>
 					<TabsTrigger value="docker">Docker</TabsTrigger>
 					<TabsTrigger value="backups">Backups</TabsTrigger>

apps/client/app/routes/home.tsx

@@ -7,12 +7,12 @@ import { listVolumesOptions } from "~/api-client/@tanstack/react-query.gen";
 import { CreateVolumeDialog } from "~/components/create-volume-dialog";
 import { StatusDot } from "~/components/status-dot";
 import { Button } from "~/components/ui/button";
+import { Card } from "~/components/ui/card";
 import { Input } from "~/components/ui/input";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { VolumeIcon } from "~/components/volume-icon";
 import type { Route } from "./+types/home";
-import { Card, CardHeader } from "~/components/ui/card";
 
 export function meta(_: Route.MetaArgs) {
 	return [