Clean up work page on mobile

Author: tedspare

src/ui/work-table.tsx

@@ -68,10 +68,10 @@ const works = [
 			'We built a platform to make an AI-directed video out of your GitHub activity. It was used by thousands of devs, which caused it to crash, so we parallelized the rendering engine and dynamically down-rezzed on mobile to scale.',
 		backgroundImageUrl: '/images/graphite.png',
 		image: (
-			<div className="flex w-full flex-col gap-2">
+			<div className="flex h-full w-full flex-col justify-center gap-2">
 				<div className="mr-auto rounded-custom bg-background px-2 py-1">enter your github username</div>
 				<div className="ml-auto rounded-custom bg-background px-2 py-1">@carmenlala</div>
-				<div className="flex flex-col gap-4 rounded-custom bg-background p-4">
+				<div className="flex w-full flex-col gap-4 rounded-custom bg-background p-4">
 					<div className="grid w-full grid-flow-col grid-rows-7 gap-1 overflow-hidden">
 						{Array.from({ length: 7 * 52 }).map((_, index) => (
 							<div
@@ -133,7 +133,7 @@ const works = [
 		name: 'Cal.com',
 		description: 'We built an early version of Cal.ai, one of the first AI agents to go to market.',
 		image: (
-			<div className="flex w-full flex-col gap-2 text-left">
+			<div className="flex h-full w-full flex-col gap-2">
 				<div className="mr-auto flex flex-col rounded-custom bg-background p-4">
 					<p>from: [email protected]</p>
 					<p className="opacity-70">to: Cal.ai</p>
@@ -220,15 +220,15 @@ export const WorkTable = () => {
 						<div
 							key={index}
 							id={`work-${work.name}`}
-							className={`group h-fit w-full space-y-4 rounded-custom border p-4 px-6 text-secondary transition-colors duration-500 ${
+							className={`group h-fit w-full space-y-4 rounded-custom border text-secondary transition-colors duration-500 sm:p-4 sm:px-6 ${
 								highlightedWork === work.name ? 'border-primary' : 'border-primary/0'
 							}`}
 						>
 							<div className="flex justify-between">
 								<h3 className="text-primary">{work.name}</h3>
 								<div>{work.date}</div>
 							</div>
-							<div className="grid gap-6 md:grid-cols-2">
+							<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 								<div className="flex w-full flex-col gap-4">
 									{work.quote ? (
 										<div className="text-5xl text-primary leading-12 tracking-tight">{work.quote}</div>
@@ -248,21 +248,13 @@ export const WorkTable = () => {
 										) : null}
 									</div>
 								</div>
-								<div
-									className={cn('relative h-fit w-full space-y-4 text-right', {
-										'aspect-square': work.image
-									})}
-								>
-									{work.image ? (
-										<div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center p-4">
-											{work.image}
-										</div>
-									) : null}
+								<div className="relative flex h-full w-full flex-col items-center justify-center">
+									{work.image ? <div className="z-10 h-full w-full shrink-0 p-4">{work.image}</div> : null}
 									{work.backgroundImageUrl ? (
 										<CustomImage
 											src={work.backgroundImageUrl}
 											alt={work.name}
-											className="absolute top-0 h-full w-full object-cover saturate-[1.25] dark:saturate-[0.75]"
+											className="absolute top-0 left-0 w-full object-cover saturate-[1.25] dark:saturate-[0.75]"
 										/>
 									) : null}
 								</div>