chatgpt codex: told to improve ux/ui consistently, 5 times

app/users/[id]/content.tsx

@@ -26,8 +26,8 @@ function ProfileMoreDetails({ profile }: { profile: UserProfileDetails }) {
 			{/*
 			//@ts-expect-error */}
 			<FriendCarousel
-				title={<span className="pl-4">Friends</span>}
-				className="overflow-visible -ml-4"
+				title="Friends"
+				className="overflow-visible"
 				friends={theirFriends || []}
 			/>
 		</>
@@ -50,15 +50,25 @@ export default function UserProfileContent({
 		}
 	}, [profile]);
 
-	if (isLoading) return <div className="p-4">Loading user profile...</div>;
+	if (isLoading)
+		return (
+			<div className="page-container py-6 space-y-6">
+				<div className="h-10 w-64 rounded-lg bg-surface0/60 animate-pulse" />
+				<div className="panel-soft h-32 animate-pulse" />
+				<div className="panel-soft h-64 animate-pulse" />
+			</div>
+		);
 	if (!profile) notFound();
 
 	return (
-		<div className="p-4 space-y-6">
+		<div className="page-container py-6 space-y-6">
 			<UserProfileHeader user={profile} />
-			<Separator />
-			<div className="break-all pl-4 whitespace-pre-line">
-				{profile.description}
+			<Separator className="bg-surface0/60" />
+			<div className="panel-soft p-6">
+				<h2 className="text-lg font-semibold text-text">About</h2>
+				<p className="mt-2 text-sm text-subtext1 break-all whitespace-pre-line">
+					{profile.description || "No description provided yet."}
+				</p>
 			</div>
 			{profile.isBanned && (
 				<>

app/users/[id]/page.tsx

@@ -8,7 +8,13 @@ export default async function UserProfilePage({
 	params: { id: string };
 }) {
 	return (
-		<Suspense fallback={<div className="p-4">Loading profile…</div>}>
+		<Suspense
+			fallback={
+				<div className="page-container py-6 text-sm text-subtext1">
+					Loading profile…
+				</div>
+			}
+		>
 			<UserProfileContent userId={(await params).id} />
 		</Suspense>
 	);