style(fix): fix weirdness on the session screenshots and tweak text size

Co-authored-by: proudparrot2 <[email protected]
Co-authored-by: AnonymousFxz <[email protected]>

src/app/(main)/page.tsx

@@ -20,21 +20,21 @@ export default async function Dashboard() {
 	const images = await db.select().from(image);
 	return (
 		<div className="m-auto flex w-full flex-col p-4">
-			<h1 className="text-2xl font-bold mb-6">Workspaces</h1>
+			<h1 className="text-3xl font-bold mb-6">Workspaces</h1>
 			<section className="flex flex-wrap gap-2">
 				<Suspense fallback={<Loader2 size={64} className="animate-spin" />}>
 					{images.map((image) => (
 						<Dialog key={image.dockerImage}>
 							<DialogTrigger>
-								<div className="relative w-64 aspect-[5/3] rounded-lg overflow-hidden shadow-lg bg-accent/40 backdrop-blur-lg group">
+								<div className="relative w-64 aspect-[5/3] rounded-lg overflow-hidden shadow-lg bg-accent/40 group">
 									<Image
 										src={image.icon}
 										alt={image.friendlyName}
 										fill
 										className="object-cover group-hover:scale-105 duration-200"
 									/>
 									<div className="absolute inset-0 bg-gradient-to-t from-accent/90 to-transparent" />
-									<div className="absolute bottom-2 left-2 text-white flex flex-col">
+									<div className="absolute bottom-2 left-2 text-foreground flex flex-col">
 										<h3 className="text-lg font-bold">{image.friendlyName}</h3>
 										<p className="text-left text-sm text-muted-foreground">{image.category}</p>
 									</div>

src/app/(main)/sessions/page.tsx

@@ -61,7 +61,7 @@ export default async function Dashboard() {
 	const containerStates = await Promise.all(sessions.map((session) => docker.getContainer(session.id).inspect()));
 	return (
 		<div className="m-auto flex w-full flex-col p-4">
-			<h1 className="text-2xl font-bold mb-6">Sessions</h1>
+			<h1 className="text-3xl font-bold mb-6">Sessions</h1>
 			<section className="flex flex-wrap gap-1">
 				<Suspense fallback={<Loader2 size={64} className="animate-spin" />}>
 					{sessions.length ? (
@@ -121,7 +121,7 @@ export default async function Dashboard() {
 													fill
 													sizes="6.5rem 13rem"
 													alt=""
-													className="object-fill rounded-sm md:h-[6.5rem] md:w-[13rem] h-[3.25rem] w-[6.5rem]"
+													className="object-fill rounded-none md:h-[6.5rem] md:w-[13rem] h-[3.25rem] w-[6.5rem]"
 												/>
 											) : (
 												<div className="flex items-center justify-center rounded-sm bg-muted h-36 w-full">