refactor: increase workspace and template avatar size (#17200)

**Before**
<img width="1363" alt="Screenshot 2025-04-01 at 14 46 10"
src="https://github.com/user-attachments/assets/d3d76d70-df16-4b27-a138-e493e0bcac83"
/>
<img width="1360" alt="Screenshot 2025-04-01 at 14 45 55"
src="https://github.com/user-attachments/assets/bbae38fe-6ed2-42fa-99b0-e24f6c8d382d"
/>

**After**
<img width="1359" alt="Screenshot 2025-04-01 at 14 46 18"
src="https://github.com/user-attachments/assets/230b606b-fd5f-4e42-9ca2-56ddb2e1f617"
/>
<img width="1362" alt="Screenshot 2025-04-01 at 14 46 02"
src="https://github.com/user-attachments/assets/b22d4b59-4660-47dd-a362-e8d842dd2a82"
/>

site/src/components/Avatar/AvatarData.tsx

@@ -37,31 +37,17 @@ export const AvatarData: FC<AvatarDataProps> = ({
 	}
 
 	return (
-		<Stack spacing={1} direction="row" className="w-full">
+		<div className="flex items-center w-full gap-3">
 			{avatar}
 
-			<Stack spacing={0} className="w-full">
-				<span
-					css={{
-						color: theme.palette.text.primary,
-						fontWeight: 600,
-					}}
-				>
-					{title}
-				</span>
+			<div className="flex flex-col w-full">
+				<span className="text-sm font-semibold">{title}</span>
 				{subtitle && (
-					<span
-						css={{
-							fontSize: 13,
-							color: theme.palette.text.secondary,
-							lineHeight: 1.5,
-							maxWidth: 540,
-						}}
-					>
+					<span className="text-content-secondary text-xs font-medium">
 						{subtitle}
 					</span>
 				)}
-			</Stack>
-		</Stack>
+			</div>
+		</div>
 	);
 };

site/src/components/Avatar/AvatarDataSkeleton.tsx

@@ -4,13 +4,13 @@ import type { FC } from "react";
 
 export const AvatarDataSkeleton: FC = () => {
 	return (
-		<Stack spacing={1} direction="row" className="w-full">
-			<Skeleton variant="rectangular" className="size-6 rounded-sm" />
+		<div className="flex items-center gap-3 w-full">
+			<Skeleton variant="rectangular" className="size-10 rounded-sm" />
 
-			<Stack spacing={0}>
+			<div className="flex flex-col w-full">
 				<Skeleton variant="text" width={100} />
 				<Skeleton variant="text" width={60} />
-			</Stack>
-		</Stack>
+			</div>
+		</div>
 	);
 };

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -113,6 +113,7 @@ const TemplateRow: FC<TemplateRowProps> = ({ showOrganizations, template }) => {
 					subtitle={template.description}
 					avatar={
 						<Avatar
+							size="lg"
 							variant="icon"
 							src={template.icon}
 							fallback={template.display_name || template.name}

site/src/pages/WorkspacesPage/WorkspacesTable.tsx

@@ -221,7 +221,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 											}
 											subtitle={
 												<div>
-													<span css={{ ...visuallyHidden }}>User: </span>
+													<span css={{ ...visuallyHidden }}>Owner: </span>
 													{workspace.owner_name}
 												</div>
 											}
@@ -230,6 +230,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
 													variant="icon"
 													src={workspace.template_icon}
 													fallback={workspace.name}
+													size="lg"
 												/>
 											}
 										/>

site/tailwind.config.js

@@ -15,7 +15,7 @@ module.exports = {
 			},
 			fontSize: {
 				"2xs": ["0.625rem", "0.875rem"],
-				xs: ["0.75rem", "1.125rem"],
+				xs: ["0.75rem", "1rem"],
 				sm: ["0.875rem", "1.5rem"],
 				"3xl": ["2rem", "2.5rem"],
 			},